search

micro-zoe / micro-app

A simple, efficient and powerful micro front-end framework. 一款简约、高效、功能强大的微前端框架
https://micro-zoe.github.io/micro-app/
MIT License
5.61k stars 570 forks source link

跨域问题 #1273

Open chenxugen opened 4 months ago

chenxugen commented 4 months ago

基座上的代理正常，子应用单独打开的代理也正常，但是从基座上跳转到子应用上时出现的跨域问题

图片

基座上的代理 图片

子应用上的代理 图片

本地 （基座http://192.168.10.190:8081 子应用 http://192.168.10.190:1901）

环境信息

图片

bailicangdu commented 4 months ago

嵌入主应用后相当于从主应用域名向子应用发起请求，产生跨域，单独运行没问题。

看报错信息是跨域请求带了cookie，那么Access-Control-Allow-Origin不能设置为*，必须指定域名，同时设置Access-Control-Allow-Credentials: true。

chenxugen commented 4 months ago

图片

图片 我设置了直接文件就跨域了，本来是子应用接口出现跨域的，现在是整个子应用都跨域了

bailicangdu commented 4 months ago

少了主应用端口号 image

chenxugen commented 4 months ago

图片 图片

嗯设置了，接口还是跨域

chenxugen commented 4 months ago

少了主应用端口号 image 嗯设置了，接口还是跨域

bailicangdu commented 4 months ago

问题出在跨域请求带了cookie，可以网上搜一下解决方案，如果能提供一个demo，我们可以帮助排查问题

chenxugen commented 4 months ago

问题出在跨域请求带了cookie，可以网上搜一下解决方案，如果能提供一个demo，我们可以帮助排查问题

图片 感谢大佬指教，我这个貌似没有cookie，这个是改造的代码，没有demo

bailicangdu commented 4 months ago
image

Access-Control-Allow-Credentials设置为true说明带cookie，此时Access-Control-Allow-Origin不能设置为'*'，两个配置冲突了

liujszbwx commented 3 months ago

大佬解决没有，我这边Access-Control-Allow-Origin 即使指明域名，也会跨域，就是子应用加载的时候请求js不会携带cookie，基座加载入口的时候倒是会携带cookie

bailicangdu commented 3 months ago

大佬解决没有，我这边Access-Control-Allow-Origin 即使指明域名，也会跨域，就是子应用加载的时候请求js不会携带cookie，基座加载入口的时候倒是会携带cookie

参考 https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/advanced?id=_1%e3%80%81%e8%87%aa%e5%ae%9a%e4%b9%89fetch

liujszbwx commented 3 months ago

这个也配置了，就是配置了这个加载入口的时候才会携带cookie，打印了fetch的url发现只输出子应用的url，子应用请求接口，和资源都没有携带cookie

liujszbwx commented 3 months ago

貌似start 自定义的fetch并没有劫持 子应用发出的资源和接口请求，看介绍自定义fetch后是能劫持资源的，但是貌似只劫持了子应用入口，就很奇怪

bailicangdu commented 3 months ago

@liujszbwx 子应用是vite吗

liujszbwx commented 3 months ago

@bailicangdu 是的

bailicangdu commented 3 months ago

vite应用加载js资源默认带cookie

bailicangdu commented 3 months ago

network Headers中的信息截图看一下

liujszbwx commented 3 months ago

公司内部不方便截图，我复制一下请求头和响应头吧

基座是端口3004，子应用是 3002

请求头

HTTP/1.1 200 OK
Vary: Origin, Accept-Encoding
Access-Control-Allow-Origin: http://localhost:3004
Access-Control-Allow-Credentials: true
cache-control: no-cache
connection: close
content-type: application/javascript
date: Tue, 13 Aug 2024 09:54:17 GMT
Content-Encoding: br
Transfer-Encoding: chunked

响应头

GET /src/utils/constants.ts HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Host: 127.0.0.1:3002
Origin: http://localhost:3004
Sec-Fetch-Dest: script
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
sec-ch-ua: "Not)A;Brand";v="99", "Google Chrome";v="127", "Chromium";v="127"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

@bailicangdu

bailicangdu commented 3 months ago

不方便的话可以加wx群，私聊

liujszbwx commented 3 months ago

不方便的话可以加wx群，私聊

大佬给一下群号~

bailicangdu commented 3 months ago
image
JieleeJie commented 1 week ago

试试 disable-patch-request https://github.com/micro-zoe/micro-app/issues/1280#issuecomment-2222448311