位置: IT常识 - 正文

[qiankun]跨域(qiankun跨域问题)

编辑:rootadmin
[qiankun]跨域问题线上跨域问题静态资源问题微服务的跨域问题本地跨域localhost主服务加载localhost微服务localhost主服务加载https微服务问题1问题2分析解决方案微服务中交互的跨域问题接口调用微服务复用问题场景描述分析

推荐整理分享[qiankun]跨域(qiankun跨域问题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:啥叫跨域,跨域请求是什么意思,跨域详解,乾坤跨域问题,qiankun跨域,啥叫跨域,qiankun跨域,qiankun跨域问题,内容如对您有帮助,希望把文章链接给更多的朋友!

微前端的开发过程中一定会遇到跨域问题

因为主服务是一个域名,子服务也分别是不同的域名,因此主应用加载微服务的时候肯定就涉及到了跨域

线上跨域问题静态资源问题

线上产生了微服务的静态资源加载的跨域问题,该问题可以查看qiankun的图片加载解决方案。

其它静态资源加载的问题,例如:

并且比较奇怪的是,同样是微服务的静态文件一个加载了,一个失败了,最后发现其实都没有成功,包括域名地址,只是因为在浏览器打开过微服务留下了缓存,所以主应用是使用的disk cache的部分内容,加载的缓存

解决静态资源加载的跨域问题,通过配置以下内容允许静态资源的加载

add_header Access-Control-Allow-Origin *;微服务的跨域问题

https主服务加载https的微服务的线上跨域问题,可以通过nginx配置,允许子服务被加载

然后在设置nginx的过程中发现一个问题,网上过于nginx的设置很多写法,难道是等价的?然后发现这是一个巨坑啊,慢慢摸索发现:

错误写法!!!!:

add_header 'Access-Control-Allow-Origin' '*';

正确写法,以下均可:

add_header Access-Control-Allow-Origin '*'; add_header Access-Control-Allow-Origin *;

跨域问题突然解决,感觉好心塞,就是因为多了个单引号,整了这么长时间

如果你的问题已经解决,可以忽略下面的问题,如果没有可以继续看一下

location / { root /usr/share/nginx/html; index index.html index.htm; autoindex on;}

以上设置非常重要,这个设置必须有,是用来表明静态文件是在nginx目录下html文件夹中,是在nginx服务器的该目录下查找web文件

因为还有跨域问题,所以是add_header还是没有生效,看到网上有一些说是因为nginx配置文件中add_header的放置位置的问题。。。

之前测试过以下的错误写法:

server { listen 80; listen [::]:80; server_name localhost; add_header Access-Control-Allow-Origin '*'; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; location / { root /usr/share/nginx/html; index index.html index.htm; autoindex on; } if ($request_method = 'OPTIONS') { return 204; }}

开始以为是将add_header放在了location前面,导致失败,推测可能原因是因为location中root与index的设置导致路径重定向了,因此在location之前的 add_header 失效了,但是调整了顺序后发现好像也不是该问题,目前为止尝试过发现顺序并不影响设置情况

最后突然想到了是不是端口问题,写的是80端口,最终发现本人的问题就是端口问题导致的。

线上环境的设置要求,端口必须是8080,可能不同的上线环境端口要求不同,因此需要确认自己的部署环境是否有端口要求,保证自己的端口可用即可

最终,是在项目中添加了一个覆盖nginx默认设置的文件,根据规则覆盖的是

server { listen 8080; listen [::]:8080; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; autoindex on; } if ($request_method = 'OPTIONS') { return 204; } add_header Access-Control-Allow-Origin '*'; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';}

主应用无需跨域设置,但是微服务需要设置为允许跨域

[qiankun]跨域(qiankun跨域问题)

以上我的跨域问题解决,以上方法解决了前端主服务(基座)加载子服务的跨域问题,最后发现其实最根本的原因还是对nginx的配置并不熟悉,并且没有留意自己的上线环境的一些硬性要求导致在该问题上pending了很久

本地跨域localhost主服务加载localhost微服务{ devServer:{ headers: { 'Access-Control-Allow-Origin': '*', } }}

本地开发的时候设置了vue.config.js中的header选项,所以可以正常查看localhost主服务加载的localhost的微服务,但当微服务变成https又报错了

localhost主服务加载https微服务问题1

Access to fetch at 'https://xxx-web.sit.suffix/' from origin 'http://localhost:8082' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

Uncaught TypeError: application 'xxx-web' died in status LOADING_SOURCE_CODE: Failed to fetch

这个问题是浏览器对同源问题检查导致的,主要是微服务是通过fetch被加载到主应用的,目前为止该问题和线上的跨域问题是一致的,都是线上微服务本身是不允许跨域访问的,所以我们需要设置的是微服务允许跨域

根据线上跨域的解决方案,修改或者添加微服务的nginx的配置,添加完成之后,发现线上微服务被线上主服务加载的跨域问题已经解决了,但是本地的主服务去加载的时候居然还有问题?!!!

问题2

Access to fetch at ‘https://xxx.xxx.xx.com/’ from origin ‘http://0.0.0.0:8080’ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private.

线上没有该问题,考虑线上的资源的开放性是相同的,那么本地调试时如何解决该跨域的问题

分析

新版的chrome浏览器会校验发起端的域名和访问资源的域名之间的关系,如果客户端发起域名比访问资源所在的域名更public(开放),会导致The request client is not a secure context and the resource is in more-private address …错误产生

根据错误信息也可以看出是指资源处于更私有的地址空间 例如 1.IP1是非localhost,IP2是localhost 2.IP1是public,IP2是private 则以上情况IP2处于更私有的空间,IP2访问IP1会报错

解决方案

在浏览器地址栏输入

chrome://flags/#block-insecure-private-network-requests

将Block insecure private network requests.项的Default改为Disabled即可。

本人在输入该内容的时候却没有该选项,但是浏览器却已经开始校验该问题,最终通过更新浏览器发现了该选项,设置了Disabled后问题解决

微服务中交互的跨域问题

微服务页面可以加载,页面直接查看了

接口调用

虽然可以加载页面,但是部分页面内的请求存在跨域问题 net::ERR_NAME_NOT_RESOLVED

所以没有从根本上解决问题

但是特殊的连接,可以直接通过nginx设置跨域,例如在nginx配置的server 中添加

location ~ ^/prefixPath{      proxy_pass http://xxx.xx.xxxx.xx:169;    }

设定域名转发,解决接口跨域问题

微服务复用问题场景描述

同一个微服务因为都是用于控制权限模块,所以希望能够被不同的系统加载复用,只是在调用数据的时候希望到各自的系统获取数据

分析

一般情况下,我们可能是通过axios.defaults.baseURL设置服务端的域名。

当我们想要同一个微服务被复用的时候,需要设置axios.defaults.baseURL为’',或者不设置值,此时微服务的接口会变成相对路径,域名会变成主服务的域名,只有当微服务单独启动的时候域名会是微服务自己的域名

此时我们仅仅需要设置主服务的转发规则,就可以根据不同的主服务将接口转发给不同系统的服务端,分别各自获取数据

这里需要注意的一点是,因为微服务的交互接口因为是相对路径,所以该接口的域名很可能变成主服务的域名,因此转发的配置需要同时添加到微服务与主服务中(因为需要考略到当微服务单独启动时的转发问题)

本文链接地址:https://www.jiuchutong.com/zhishi/294525.html 转载请保留说明!

上一篇:将时间序列转成图像——格拉姆角场方法 Matlab实现(时间序列转换)

下一篇:级联选择器(el-cascader)动态加载(lazyLoad)实现省市区三级选择(级联选择器 数据回显)

  • iphone11如何分屏操作(iphone11怎么样分屏)

    iphone11如何分屏操作(iphone11怎么样分屏)

  • 华为matebook14卡住不能动怎么回事 (华为matebookd14卡了咋办)

    华为matebook14卡住不能动怎么回事 (华为matebookd14卡了咋办)

  • 微机的字长是什么(微机字长怎么计算)

    微机的字长是什么(微机字长怎么计算)

  • 苹果se是什么手机(苹果se是个什么手机)

    苹果se是什么手机(苹果se是个什么手机)

  • 手机掉水里但能正常用(手机掉水里但能正常用,要去维修吗)

    手机掉水里但能正常用(手机掉水里但能正常用,要去维修吗)

  • 抖音钱包怎么显示为0(抖音钱包怎么显示网络错误)

    抖音钱包怎么显示为0(抖音钱包怎么显示网络错误)

  • 怪兽充电宝几小时封顶(怪兽充电宝小程序)

    怪兽充电宝几小时封顶(怪兽充电宝小程序)

  • 抖音播放量是人数还是次数(抖音播放量是人数吗)

    抖音播放量是人数还是次数(抖音播放量是人数吗)

  • 苹果11有多防水(苹果11防水可以到达什么程度)

    苹果11有多防水(苹果11防水可以到达什么程度)

  • 抖音赞评论和赞作品区别(抖音赞和评论哪个重要)

    抖音赞评论和赞作品区别(抖音赞和评论哪个重要)

  • 加入黑名单后再删除,对方还能加自己好友吗(加入黑名单后再删除对方列表里还有你吗)

    加入黑名单后再删除,对方还能加自己好友吗(加入黑名单后再删除对方列表里还有你吗)

  • was一tl10是华为什么型号(华为wlzal10是啥手机)

    was一tl10是华为什么型号(华为wlzal10是啥手机)

  • 微信星礼卡多久会退回(微信星礼卡可以直接刷吗)

    微信星礼卡多久会退回(微信星礼卡可以直接刷吗)

  • 镜头分为哪几种(拍摄镜头分为哪几种)

    镜头分为哪几种(拍摄镜头分为哪几种)

  • sata1的接口可以接固态吗(sata接口可以用sata3吗)

    sata1的接口可以接固态吗(sata接口可以用sata3吗)

  • ipad能插卡么(苹果ipad能插卡吗)

    ipad能插卡么(苹果ipad能插卡吗)

  • 淘宝多少颗心一个钻(淘宝最多有多少颗心)

    淘宝多少颗心一个钻(淘宝最多有多少颗心)

  • 手机没声音显示耳机模式怎么办(手机没声音显示耳机)

    手机没声音显示耳机模式怎么办(手机没声音显示耳机)

  • whatsapp注册无法连接(whatsapp注册无法发送sms短信)

    whatsapp注册无法连接(whatsapp注册无法发送sms短信)

  • 苹果可以加大内存吗(苹果加大内存有影响吗)

    苹果可以加大内存吗(苹果加大内存有影响吗)

  • 快手土豪榜单在哪里看(快手土豪榜单在哪里看到)

    快手土豪榜单在哪里看(快手土豪榜单在哪里看到)

  • 快手的本地作品集在哪个文件夹里(快手的本地作品怎么删除)

    快手的本地作品集在哪个文件夹里(快手的本地作品怎么删除)

  • 华为手机的扫描功能在哪里(华为手机的扫描仪)

    华为手机的扫描功能在哪里(华为手机的扫描仪)

  • avgmsvr.exe是什么进程 avgmsvr进程信息查询(vrvarp.exe是什么)

    avgmsvr.exe是什么进程 avgmsvr进程信息查询(vrvarp.exe是什么)

  • 鸟瞰博登湖上的迈瑙岛,德国 (© Amazing Aerial Agency/Offset by Shutterstock)(博登湖下载)

    鸟瞰博登湖上的迈瑙岛,德国 (© Amazing Aerial Agency/Offset by Shutterstock)(博登湖下载)

  • 应税销售收入是指什么
  • 计入职工福利费的有哪些
  • 增值税发票能不能报销
  • 进项税额转出时点
  • 所有者权益分配流程
  • 金税四期对企业的风险
  • 如何判断固定资产资本化还是费用化
  • 百旺税控盘自己用不了
  • 应付账款暂估余额
  • 支付宝过路费开票小程序
  • 企业收到的政府补贴交所得税吗
  • 期末留抵税额退税怎么做分录
  • 单位为个人负担工资、薪金所得的个税,怎么征收个税
  • 股权转让资产怎么清算
  • 永续债的利息会计处理
  • 差额内部收益率大于基准收益率
  • 保险营销员的佣金怎么算个税
  • 小规模纳税人没有收入怎么报税
  • 不是办税员可以去税局办事吗
  • 采购比价流程图
  • 个税当月计提还是下月
  • 个税申报已经申报如何更改
  • 雇主全额负担的法律责任
  • 服务业的营业成本怎么算
  • 房地产企业预缴增值税如何申报
  • 安全生产费怎么算
  • 资产负债率是用年初和年末数吗
  • wind10激活密钥
  • 苹果手机上显示
  • 个人所得税汇算清缴包括哪些项目
  • 退回的发票怎么处理
  • 预付账款属于资产类
  • 返利冲减收入
  • 未分配利润分配利润分录
  • outlook的数据文件
  • win7怎么看服务
  • 发行股票溢价计入哪里
  • 其他业务收入产品包括
  • 作废的专票能认证过去吗
  • 太原市插画工作室
  • three.js 教程
  • 手写发票可以报税吗
  • tsar命令 收集服务器系统信息
  • 哪些可以计入研发费用
  • redis提供了对值进行运算的命令
  • 会计caac是什么意思
  • 国税联网状态怎么没显示
  • 银行日记账跨月登记方法
  • 劳务支出和应付职工薪酬
  • ibm.data.db2
  • sqlyog与mysql
  • mysql触发器菜鸟教程
  • 视同销售要不要确认收入?
  • 增值税销项税的借贷方向
  • 企业每个季度叫什么
  • 专用发票什么意思
  • 小规模纳税人是查账征收还是核定征收
  • 银行承兑汇票贴现利息怎么算
  • 公司员工机票可以抵扣多少呢
  • 工资计提数小于发放数,如何处理
  • 出租固定资产的折旧计入哪个科目
  • 如何计提当期费用成本
  • 数据库的行和列的叙述
  • win7 64位系统关机按钮不见了怎么找回 win7关机按钮设置步骤
  • windows cortana打开
  • win10右键菜单怎么设置
  • 原os公测
  • linux常用帮助命令
  • Win7 64位系统声卡重装过程中出现失败的解决方法
  • 手机ssh远程连接服务器
  • windows听歌软件
  • windows视频截屏
  • 铁嘴王指什么动物
  • ndk sdk
  • 深入学习习总书记系列讲话精神
  • android触屏事件的处理
  • 用javascript
  • 方块大作战百科
  • js实现类
  • 河北省餐饮经营单位安全生产规定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设