一次关于微前端跨域,找不到css,js配置文件,nginx跨域, 以及ingress识别不到服务的整理结果
首先后端服务已经支持了跨域请求,允许所有的源和请求方法、请求头
1、本地可以找到css .js文件,上线服务却查找错误
解决办法:css,js上线后采用绝对路径: url: “host:port/”
2、微前端跨域原因:
2.1 可能后端未设置允许跨域(不同框架自行配置)
2.2 可能是nginx跨域 ,加上响应头:
add_header Access-Control-Allow-Origin '*';
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header Access-Control-Allow-Headers 'Content-Type, Accept, X-Requested-With';
注意,add_header是增加响应头,proxy_set_header是增加请求头,别用错了
2.3 可能是设置了跨域凭证:
withCredentials: true
前端设置凭证之后,后端的Access-Control-Allow-Origin 不能使用 * 号,要准确的ip和port 否则也会跨域
3、nginx + ingress 莫名的识别不到服务, 报错503
解决方案,强制增加请求头
proxy_set_header Host url;
不要使用:proxy_set_header Host $host;这种通配的 要指名url