SpringBoot+Vue的前后端分离项目完成跨域资源共享

在SpringBoot+Vue的前后端分离项目中，实现跨域资源共享（CORS）是开发过程中的一个重要环节。以下是一些常见且有效的方法来解决跨域问题：

一、CORS（跨源资源共享）简介

CORS定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它允许服务器指定哪些源可以访问该服务器上的资源。在前后端分离的项目中，由于前端和后端通常部署在不同的域名或端口上，因此会出现跨域问题。

二、后端解决方法

使用@CrossOrigin注解：
- 这种方法适用于单个控制器或控制器方法级别的跨域配置。
- 示例代码：
```
@RestController
public class MyController {@CrossOrigin(origins = "http://localhost:3000") // 允许指定域名的跨域请求@GetMapping("/example")public String example() {return "Example Response";}
}
```
注意：虽然简单，但重复代码较多，维护麻烦，不推荐用于大量接口。

全局跨域配置：

通过实现WebMvcConfigurer接口并重写addCorsMappings方法，可以设置全局的CORS配置。
示例代码：

@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 允许跨域的路径.allowedOrigins("http://localhost:3000") // 允许的域名.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的方法.allowedHeaders("*") // 允许的头信息.allowCredentials(true) // 是否允许证书(cookies).maxAge(3600); // 预检请求的缓存时间}
}

这种方法适用于整个应用的跨域配置，更加简洁和易于维护。

使用CorsFilter过滤器：

创建一个CorsFilter过滤器，可以在Spring Security中使用，或者直接在Spring Boot中使用。
示例代码：

@Component
public class CorsFilter implements Filter {@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization");HttpServletRequest request = (HttpServletRequest) req;if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {response.setStatus(HttpServletResponse.SC_OK);} else {chain.doFilter(req, res);}}
}

这种方法提供了更细粒度的控制，但相对复杂一些。

三、前端解决方法

在Vue项目中，可以通过配置代理来解决跨域问题。这种方法适用于开发环境。

在vue.config.js中配置代理：

module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080', // 后端接口地址changeOrigin: true, // 开启代理pathRewrite: { '^/api': '' } // 重写路径}}}
}

在封装的axios请求中设置baseURL：

import axios from 'axios';
const instance = axios.create({baseURL: '/api',timeout: 6000
});
export default instance;

四、服务器解决方法

如果项目已经部署到生产环境，可以通过服务器（如Nginx）来配置跨域。

在Nginx配置文件中添加跨域配置：

server {listen 80;server_name localhost;root /usr/web/dist/; # 指向Vue项目的build后的dist文件夹location / {root $root;index index.html;}location /api { # api映射add_header 'Access-Control-Allow-Origin' '*';proxy_pass http://backend_server_address; # 后端服务器地址}
}