vue的跨域配置

Vue 跨域配置方法

在开发过程中，Vue 项目常因同源策略限制需要配置跨域。以下是几种常见的解决方案：

开发环境配置（vue.config.js）

通过 devServer.proxy 配置代理：

module.exports = {devServer: {proxy: {'/api': {target: 'http://target-domain.com', // 目标接口域名changeOrigin: true, // 是否跨域pathRewrite: {'^/api': '' // 路径重写}}}}
}

生产环境配置（Nginx）

在 Nginx 配置中添加反向代理规则：

location /api {proxy_pass http://target-domain.com;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;
}

后端配合设置 CORS

后端需添加响应头：

• Access-Control-Allow-Origin: *（或指定域名）
• Access-Control-Allow-Methods: GET,POST,PUT,DELETE
• Access-Control-Allow-Headers: Content-Type

前端直接请求（不推荐）

临时方案（需后端配合）：

axios.get('http://target-domain.com/api', {headers: { 'Content-Type': 'application/json' }
})

注意事项

1. 开发环境建议使用 vue.config.js 代理
2. 生产环境推荐 Nginx 反向代理或后端配置 CORS
3. 开启 changeOrigin 可修改请求头中的 Host 值
4. 路径重写 (pathRewrite) 可隐藏真实接口路径