如何解决 Vue 项目中的跨域问题？

在 Vue 项目中解决跨域问题，常用的方法主要针对开发环境和生产环境：

一、开发环境：配置代理服务器（最推荐）

使用 Vue CLI 或 Vite 的开发服务器作为代理，将请求转发至目标 API。此方法简单高效，绕过浏览器的同源策略限制。

// vue.config.js 配置示例（适用于 Vue CLI）
module.exports = {
  devServer: {
 proxy: {
   "/api": {           // 匹配前端请求路径的开头 /api
     target: "http://example.com:3000",  // 替换为目标 API 地址
     changeOrigin: true,               // 更改请求源的 host header
     pathRewrite: {
       "^/api": ""                    // 可选：移除请求路径中的 /api 前缀
     }
   }
 }
  }
};

• 细节说明：
  • target：设为目标服务器的 URL（端口不同会导致跨域）。
  • changeOrigin: true 确保请求头中的 host 指向目标服务器。
  • 前端请求 /api/users 时本地发起 localhost:8080/api/users；代理将转发至 example.com:3000/users。

二、生产环境：后端支持 CORS

在生产部署时通过服务器设置响应头允许指定域名访问（推荐原生解决方案）。

• CORS 示例 (Node.js)：

  app.all("*", (req, res, next) => {
  res.header("Access-Control-Allow-Origin", "https://your-domains.com"); // 允许的域名或 *
  res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
  });
  

• 注意事项：实际中替换 your-domains.com 为前端域名，安全性建议避免使用通配符（*）。

三、可选方案：其他方法

• JSONP：仅限用于 GET 请求（过时，存在安全隐患），通过动态创建 <script> 标签实现，但前后端需约定函数名。
• 后端代理如 Nginx：直接在生产环境中配置反向代理转发请求。

首选建议：

• 开发环境用 Vue CLI 代理（简单、配置快）。
• 生产环境依赖服务器端 CORS 设置以确保安全。