前端微应用嵌入相关问题解决

112 阅读2分钟

问题一

报错信息

Access to fetch at 'test.108.local/' from origin 'master.108.local' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in theresponse must not be the wildcard '*' when the request's credentials mode is 'include'.

解决方法

Nginx 配置文件中 Access-Control-Allow-Origin 需要指定为具体的主应用域名如下图示:

image.png

问题二

报错信息

Access to fetch at 'test.108.local/' from origin 'master.108.local' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains the invalid value'gaia.tpaas108.local'. Have the server send the header with a valid value, or, if an opaqueresponse serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORSdisabled.

解决方法

在配置 add_header 'Access-Control-Allow-Origin'时,后面的域名必须得有协议头如http:// 如图 1.1 中红框中内容所示。

问题三

报错信息

image.png

解决方法

在前端项目中配置访问后端服务的域名地址,否则会拼接浏览器地址栏中的域名。

问题四

报错信息

cvices-ias#/:1 Access to XMLHttpRequest at'test.108.local/api/asinsta…' from origin'master.108.local' has been blocked by CORS policy: Responseto preflight request doesn't pass access control check: The'Access-Control-Allow-Origin' header contains multiple values'master.108.local, master.108.local', but onlyoneis allowed.

解决方法

将 location 块 外 的 add_header 'Access-Control-Allow-Origin''master.108.local' always;配置去掉,只留location 内的相同配置,如果出现两次相同的配置,Access-Control-Allow-Origin 对应的配置值会进行追加。

问题五

报错信息

前端没有带着 cookie 访问后端

解决方法

前端项目在进行跨域请求时,需要在发请求前带着如下图 1.5 中红框中的配置信息:

image.png

问题六

报错信息

cvices-ias#/:1 Access to XMLHttpRequest at 'test.108.local/api/auth/ac…' from origin 'master.108.local' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present onthe requested resource.

解决方法

在预检请求判断块里面加上跨域处理的响应头配置信息,如下图1.5 所示: image.png

Nginx 配置文件

image.png

image.png

image.png

image.png