前端调用后端,出现跨域报错怎么办

我前端是vue,后端是其他同事写的python,因为部署在不同的机器上,我前端如果直接调用他的python,axios请求就会出现跨域报错,如下 blocked by CORS policy 云云

怎么办呢,网上探索了一下午,才找到最可靠的解法。那就是在前端所在的Nginx,做这样的转发:

upstream 后端就是某台机的python端口

核心是这三行

bash 复制代码
add_header Access-Control-Allow-Origin '域名'; 
add_header Access-Control-Allow-Credentials 'true';
add_header Access-Control-Allow-Headers 'dataType,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

注意,Access-Control-Allow-Origin,可以加多个域名,但如果前端启用了credentials,就只能加一个了

相关推荐
answerball2 小时前
🔥 Vue3响应式源码深度解剖:从Proxy魔法到依赖收集,手把手教你造轮子!🚀
前端·响应式设计·响应式编程
Slow菜鸟3 小时前
ES5 vs ES6:JavaScript 演进之路
前端·javascript·es6
小冯的编程学习之路3 小时前
【前端基础】:HTML
前端·css·前端框架·html·postman
Jiaberrr4 小时前
Vue 3 中搭建菜单权限配置界面的详细指南
前端·javascript·vue.js·elementui
懒大王95274 小时前
uniapp+Vue3 组件之间的传值方法
前端·javascript·uni-app
烛阴5 小时前
秒懂 JSON:JavaScript JSON 方法详解,让你轻松驾驭数据交互!
前端·javascript
拉不动的猪5 小时前
刷刷题31(vue实际项目问题)
前端·javascript·面试
zeijiershuai5 小时前
Ajax-入门、axios请求方式、async、await、Vue生命周期
前端·javascript·ajax
恋猫de小郭5 小时前
Flutter 小技巧之通过 MediaQuery 优化 App 性能
android·前端·flutter
只会写Bug的程序员6 小时前
面试之《webpack从输入到输出经历了什么》
前端·面试·webpack