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

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

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

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

二、后端解决方法

1. 使用@CrossOrigin注解：

   • 这种方法适用于单个控制器或控制器方法级别的跨域配置。
   • 示例代码：

   @RestController
   public class MyController {
       @CrossOrigin(origins = "http://localhost:3000") // 允许指定域名的跨域请求
       @GetMapping("/example")
       public String example() {
           return "Example Response";
       }
   }

   注意：虽然简单，但重复代码较多，维护麻烦，不推荐用于大量接口。

2. 全局跨域配置：

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

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

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

3. 使用CorsFilter过滤器：

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

   @Component
   public class CorsFilter implements Filter {
       @Override
       public 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项目中，可以通过配置代理来解决跨域问题。这种方法适用于开发环境。

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

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

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

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

四、服务器解决方法

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

1. 在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; # 后端服务器地址
       }
   }

五、总结

跨域资源共享（CORS）在前后端分离的项目中是一个常见且重要的问题。通过后端配置（如使用@CrossOrigin注解、全局跨域配置、CorsFilter过滤器）、前端配置代理以及服务器配置（如Nginx）等方法，可以有效地解决跨域问题。在实际项目中，应根据具体需求和场景选择合适的方法。