vue+springboot实现项目的CORS跨域请求

好的。我们来详细讲解一下vue和springboot结合实现CORS跨域请求的完整攻略。

什么是CORS

CORS是指跨域资源共享（Cross-Origin Resource Sharing）。是一个W3C标准，它允许浏览器进行跨域访问，从而使web应用可以使用其它域名下的资源。

为什么需要CORS

在开发前后端分离的web应用时，经常会有前端页面和后台服务在不同的域名下。而由于浏览器的同源策略，不同域名下的请求默认是不能相互访问的。这时就需要CORS技术来解决跨域问题。

实现步骤

以下将介绍基于vue和springboot结合的CORS跨域请求的具体步骤。

1. 设置vue代理

在vue.config.js文件中添加proxyTable选项来设置代理。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  }
}

其中，/api是指代理的路径，target是指代理的目标地址，这里是后台服务的地址。

2. 后台添加CORS过滤器

在springboot中添加CORS过滤器，这里使用spring的CorsFilter来实现。

@Configuration
public class CorsFilterConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 允许任何头
        corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/api/**", buildConfig()); // 对api路径下的请求应用CORS过滤器
        return new CorsFilter(source);
    }
}

3. 测试CORS跨域请求

可以尝试发送一个跨域请求到后台服务，查看接口返回是否正常。以下是两个可能的跨域请求测试示例：

示例1

axios.get('/api/test').then(res => {
  console.log(res.data);
})

其中，/api/test是后台提供的接口路径。

示例2

fetch('/api/test', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'user'
  })
}).then(res => res.json()).then(data => {
  console.log(data);
})

这里使用了fetch API来发送请求。

总结

以上是vue和springboot结合实现CORS跨域请求的完整攻略。在前端中，我们通过设置代理来实现跨域请求；在后端中，我们添加CORS过滤器来允许跨域请求。这样我们就能够在开发过程中自由地使用不同域名的资源了。