vue 中CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

### 解决 Vue 中跨域请求时出现 CORS 策略问题 当在前端开发中遇到 `CORS`（跨源资源共享）策略问题时，通常是因为浏览器的安全机制阻止了来自不同域名的资源访问。以下是针对 Vue 项目解决此问题的具体方法。 #### 方法一：通过代理解决跨域问题 Vue CLI 提供了一个内置的代理功能来处理开发环境中的跨域问题。可以在项目的 `vue.config.js` 文件中设置代理： ```javascript module.exports = { devServer: { proxy: { '/api': { // 将 /api 开头的请求转发到目标地址 target: 'http://example.com', // 后端接口的实际地址 changeOrigin: true, // 是否改变请求源头，默认为 false pathRewrite: { '^/api': '' } // 可选配置，重写路径 } } } }; ``` 这种方法适用于开发环境中模拟生产环境的行为[^1]。 #### 方法二：修改 Spring Boot 的 CORS 配置 如果前后端分离部署在同一台服务器上但仍存在跨域问题，则可以通过调整后端服务的 CORS 设置解决问题。对于基于 Spring Boot 的后端应用，可以使用以下方式启用全局或局部的 CORS 支持。 ##### 全局配置 创建一个实现 WebMvcConfigurer 接口的类并覆盖 addCorsMappings 方法： ```java import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 所有接口都支持跨域 .allowedOrigins("*") // 允许所有来源 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的方法 .maxAge(3600); // 缓存时间 } } ``` 这种方式允许指定哪些 URL 或者特定客户端能够访问 API[^2]。 ##### 局部配置 也可以仅对某些控制器或者方法开启 CORS 支持： ```java @RestController @RequestMapping("/api") @CrossOrigin(origins = "http://localhost:8080") // 指定允许的前端地址 public class MyController { @GetMapping("/data") public String getData() { return "Data"; } } ``` #### 方法三：Nginx 反向代理 另一种常见的解决方案是在 Nginx 上配置反向代理。这样不仅可以隐藏真实的后端 IP 地址，还可以有效规避跨域限制。 编辑 nginx.conf 文件如下所示： ```nginx server { listen 80; server_name localhost; location /api/ { proxy_pass http://backend_server_address/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; add_header Access-Control-Allow-Origin *; # 添加响应头部 } location / { root html; index index.html index.htm; } } ``` 上述配置会将 `/api/*` 请求转发至实际的服务地址，并添加必要的 CORS 响应头。 #### 总结 以上三种方法分别对应不同的场景需求——开发阶段利用 Vue Dev Server 的代理能力；生产环境下可通过调整后端框架 CORS 参数或是借助中间件如 Nginx 实现更灵活高效的管理。