Vue 跨域问题及解决方案

一、开发阶段跨域解决方式

1、前端通过 vue.config.js 配置代理

在 vue.config.js 中配置 devServer.proxy，将请求代理到后端地址：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端服务地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

2、后端配置 CORS 跨域响应头

后端需添加允许跨域访问的响应头，常见设置如下：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

也可以使用后端框架自带的 CORS 中间件进行配置（如 Spring 的 @CrossOrigin 注解）。

二、部署阶段跨域解决方式

部署到生产环境后，推荐使用 Nginx 反向代理 来处理跨域问题。例如：

location /api/ {
    proxy_pass http://backend-server;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'Authorization,Content-Type';
}

三、浏览器预检请求（OPTIONS）

当发起非简单跨域请求时，浏览器会先发送一次 OPTIONS 请求（称为“预检请求”），确认服务器是否接受。

常见预检相关请求头

服务端需要返回的响应头