VUE项目部署解决跨域问题

本文讲述了在Vue小项目中,本地运行正常但在部署到线上服务器时遇到的跨域问题,通过在Nginx服务器的location/api块中添加CORS配置解决,鼓励读者在遇到类似问题时进行交流。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

近期vue小项目,本地测试运行正常,但是部署到线上服务器时,出现跨域问题。需要nginx服务器服务器中设置增加配置参数如下。

location /api {
      add_header 'Access-Control-Allow-Origin' '*';
      proxy_pass http://xxx.xx.xxx.xxx:8080;
}

如遇其他问题,欢迎沟通交流。

### Vue 项目 Nginx 部署配置解决方案 在将 Vue 项目部署到 Nginx 时,问题是一个常见的挑战。以下是完整的解决方案: #### 1. 确保 Vue 项目的正确打包 在开发阶段,Vue 的 `vue.config.js` 文件中可以通过代理解决问题[^3]。然而,在生产环境中,需要移除或注释掉该文件中的代理配置,以避免与 Nginx 的反向代理冲突[^4]。 ```javascript // vue.config.js module.exports = { publicPath: './', runtimeCompiler: true, // devServer: { // proxy: { // '/api': { // target: 'http://后端服务器IP:8091', // changeOrigin: true, // pathRewrite: { '^/api': '' } // } // } // } }; ``` #### 2. Nginx 配置解决问题 Nginx 的配置是解决问题的核心。以下是一个典型的 Nginx 配置示例,确保 Vue Router 和反向代理功能正常工作[^2]。 ```nginx server { listen 80; server_name www.xxx.cn; root /www/wwwroot/www.xxx.cn/dist; # 确保 Vue Router 正常工作 location / { try_files $uri $uri/ /index.html; index index.html; } # 反向代理配置 location /api/ { proxy_pass https://api.xxx.cn/; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 解决问题 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; # 处理预检请求 if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; return 204; } } ``` #### 3. 注意事项 - **路径匹配**:确保前端请求的 API 路径与 Nginx 的 `location` 匹配规则一致[^5]。 - **真实 IP 地址获取**:通过 `proxy_set_header` 设置,后端可以获取真实的客户端 IP 地址。 - **CORS 配置**:使用 `add_header` 指令添加必要的 CORS(资源共享)头部信息。 #### 4. 测试与验证 完成配置后,重启 Nginx 并测试前端是否能够正确访问后端接口。如果仍然出现问题,检查以下内容: - Nginx 配置是否生效。 - 后端服务是否允许来自前端请求。 ```bash sudo nginx -t # 检查配置文件语法 sudo systemctl restart nginx # 重启 Nginx ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值