生产环境下如何解决VueJS+Quasar项目的CORS跨域错误？

首先明确核心问题：你在Axios中设置axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*"完全无效——Access-Control-Allow-Origin是后端返回的响应头，浏览器仅会校验后端返回的这个头，前端自行设置的该头会被浏览器直接忽略。

针对你的自研后端场景，推荐以下优先级从高到低的解决方案：

1. 后端直接配置CORS响应头（最优方案） #

因为两个后端都是自研的，直接在服务端添加CORS响应头是最标准、最安全的解决方式：

• 针对https://user-backend.net和https://data-backend.net，分别配置允许你的前端域名https://myapp.net跨域访问：
  • 基础响应头配置：

    Access-Control-Allow-Origin: https://myapp.net
    Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
    Access-Control-Allow-Headers: Content-Type, Authorization
    

  • 如果你的请求需要携带Cookie（比如登录态），还要额外添加：

    Access-Control-Allow-Credentials: true
    

    同时前端Axios需要开启withCredentials：

    axios.defaults.withCredentials = true;
    

  • 关键：处理OPTIONS预检请求——浏览器会在复杂请求（如带自定义头、非GET/POST请求）前发送OPTIONS请求，后端需要返回200状态码及上述CORS头，不能拒绝这个请求。

2. 前端部署服务器配置反向代理 #

如果暂时无法修改后端代码，可在前端部署的服务器（如Nginx）上配置反向代理，让API请求和前端同域：

• 示例Nginx配置（适配你的域名）：

  server {
      listen 443 ssl;
      server_name myapp.net;
  
      # 代理用户后端API，前端请求路径改为 /api/user/xxx
      location /api/user/ {
          proxy_pass https://user-backend.net/;
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-For $remote_addr;
      }
  
      # 代理数据后端API，前端请求路径改为 /api/data/xxx
      location /api/data/ {
          proxy_pass https://data-backend.net/;
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-For $remote_addr;
      }
  }
  

• 调整前端Axios的请求路径：将原本的https://user-backend.net/tokens改为/api/user/tokens，以此类推，这样请求就和前端同域，彻底避免跨域问题。

3. 边缘代理/CDN层配置跨域规则 #

如果你的前端使用CDN部署，可以利用CDN的边缘规则功能配置类似反向代理的转发逻辑，原理和服务器代理一致，无需修改前端或后端代码，适合云原生部署场景。

额外注意事项 #

• 生产环境绝对不能通过关闭浏览器安全设置绕过跨域，这仅适用于本地开发临时测试；
• 不要使用Access-Control-Allow-Origin: *搭配Access-Control-Allow-Credentials: true，浏览器会直接拒绝这种配置，必须指定具体的前端域名；
• 若后端使用框架（如Spring Boot、Express），大多有成熟的CORS中间件可以快速配置，无需手动编写响应头逻辑。

内容的提问来源于stack exchange，提问作者Louis Chopard