飘在云端

啊!那蓝真天,白真云!

· 前端 · · 119次浏览

谷歌浏览器 Chrome 允许CORS所有跨域方法及解除本地资源通信限制

环境:Chrome 99.0.4844.51(正式版本) (64 位)

今天要修改一个 vue 项目,修改好本地浏览器打开测试加载失败,直接空白页

控制台检查日志,输出:

请输入图片描述

初步看是跨域问题,那先解决跨域问题,从谷歌 v80+开始,以前的那些启动参数 --disable-web-security就不好使了,这里我们换一个方案解决:使用扩展插件,需自备魔法上网访问谷歌网上扩展商店,经过多次测试,目前找到了一个跨域限制解除最完全的扩展插件 CORS Unblock,应用商店地址:https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino?hl=zh-CN

安装好后,单击一下扩展插件启用它,插件图标亮起颜色才是成功启用
请输入图片描述
可以到 https://webbrowsertools.com/test-cors/ 这里测试跨域情况,点击这些方法名进行跨域检测
请输入图片描述
现在是跨域问题解决了一半,因为 CORS-RFC1918 规范扩展定义了更严格的跨域要求,对网站和本机本地端口的内网通信做了严格限制,我的项目涉及到了与本地网络的某个客户端监听的局域网端口 API 有调用,我们需要完全解除 Chrome 的屏蔽,Chrome 地址栏输入并打开 chrome://flags/#block-insecure-private-network-requests
将选项值改为 Disable
https://p.0z.gs/i/2022/08/17/62fc955f5830e.png

最后一步,因为本地资源交互引用,使用的协议是 file://,不是 http, data, chrome,
chrome-extension, https 等,我们需要扩展协议限制,允许本地文件打开引用

需要在谷歌浏览器启动时传入启动参数解除限制

因为 Windows 默认桌面环境的路径输入限制,无法加入很长的参数,实际上是支持最大 8192 字符的长度

通过 桌面快捷方式的 目标 输入框加参数有缓冲区输入的限制(Explorer自身路径输入长度限制),Windows Explorer 桌面支持的手动输入的路径最大字符为 259 个字符(含空格)

不建议直接在谷歌浏览器的快捷方式右键属性的目标路径加参数,不方便编辑,有很多限制

我们使用 CMD 命令行传入参数调用 Chrome 启动,这样限制就是 Windows 系统级的路径长度限制了(8192字符),而不是 Explorer 桌面 GUI 的输入缓冲限制了

这样操作,桌面新建一个 任意名字.bat 的空白文件,里面内容为

start "" "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" https://www.bing.com --safebrowsing-disable-download-protection --allow-running-insecure-content --ignore-certificate-errors --no-sandbox --disable-background-networking --disable-web-security --allow-file-access-from-files

上面是我加的一些参数,根据需要自己删除,路径根据个人环境自行调整,注意 start 后面跟了一个双引号引起的空值,不能删除
请输入图片描述

最后,彻底关闭谷歌浏览器的所有后台进程(使用任务管理器查看 没有 chrome.exe 进程存在),通过刚才建立的批处理文件重新打开谷歌浏览器即可

项目成功在本地浏览器加载,控制台报错的是那个 PWA 的问题(ServiceWorker),没任何影响,跟跨域无关。
请输入图片描述
请输入图片描述

如果不具备魔法访问 Chrome 扩展商店,我这里打包了一个离线扩展插件:CORS Unblock

下载后解压到任意目录,并在 chrome://extensions/ 这里开启开发者模式,加载已解压的扩展程序,选择解压的目录即可加载插件

下面是搜索资料参考的一些链接:

https://github.com/haishanh/yacd/issues/641
https://zhuanlan.zhihu.com/p/130391287
https://blog.csdn.net/lvmengzou/article/details/119691737
https://blog.csdn.net/weixin_44057084/article/details/123068426
https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino?hl=zh-CN
https://webbrowsertools.com/test-cors/
评论 (0条)