新版chrome浏览器设置允许跨域的实现

新版chrome浏览器设置允许跨域的实现

前言

目前前端解决跨域，主要是通过webpack的devServer来配置。

但是有时候开发环境中没有配置devServer，后端又没有设置跨域。

前后端分离项目，本地调试代码的时候，经常会遇到跨域问题。

本文主要是对之前文章浏览器跨域访问解决方案，做一个补充吧，因为这篇文章最后对chrome设置方式，目前设置不起作用了，更新文章，修正一下。

解决--disable-web-security 不起作用的方案

之前文章，提供了windows，mac，linux等设置--disable-web-security的方式，但是chrome新版本安全策略升级，这种打开方式或者之前的设置方式是无效的。

那么如何解决呢？

一、设置跨域，在chrome快捷方式右键‘属性’，‘快捷方式’，‘目标’ 路径最后边按一下空格，再添加以下代码：

--args --disable-web-security --user-data-dir=D:\HaoroomsChromeUserData

或者

--disable-web-security --user-data-dir=D:\HaoroomsChromeUserData

D:\HaoroomsChromeUserData 是我自己随便找了个文件夹，可以自己随便配置，不这么写的话，新版本浏览器可能出现设置不生效的问题

这个方式等于是用户在自己电脑创建了一套chrome的私有化浏览器，里边的设置配置等均为私有化设置。

此时找到chrome安装源目录，打开chrome.exe，会发现，在私有chrome配置的所有书签，选项等，在这个chrome里都没有。

备注：如果要删掉D:\HaoroomsChromeUserData，一定要先做书签、账号密码等的备份。

一经删除，等于是把个人电脑里的私有chrome卸载了，数据都不会保留

二、设置成功以后再打开浏览器，会有提示：

“您使用的是不受支持的命令行标记： --disable-web-security，稳定性和安全性会有所下降”

此时，正常用户都可以进行跨域访问了，比方本地的前端项目，直连测试或者线上环境的接口（前提是目标环境在当前浏览器登陆过，已经存在当前账号的cookies，session等信息）

三、有的用户还是不能访问，此时在console控制台里会看到一段背景是黄颜色的字

'...Specify SameSite=None and Secure if the cookie should be sent in cross-site...'

此时浏览器还是限制了cookies的跨域访问，所以部分人的电脑还是不能使用跨域，

解决方案:

地址栏输入：

chrome://flags

再搜索：

SameSite by default cookies

找到‘SameSite by default cookies’以及‘Cookies without SameSite must be secure’，在后边有个下拉框，这俩选项均选择：‘disabled’，浏览器会提示红字：‘警告：您所要使用的是实验性功能！’

选择忽略警告，此时浏览器是我们本地创建的D:\HaoroomsChromeUserData，点击右下角的Relaunch按钮，浏览器会自动重启，并且保留所有当前已开页面。

备注：联调时使用这个模式，如果访问其它购物等网站，建议还是使用chrome.exe安装源目录的chrome.exe，避免出现不必要的麻烦

其他系统：

mac和linux一样，原来命令行不起作用了，也是指定一个存放数据的文件夹来达到跨域效果。

其他解决方案

可以利用chrome插件的方式实现跨越临时解决方案。

搜索chrome插件

Allow-Control-Allow-Origin: *

安装好插件之后，看他们的文档，设置一下要跨域访问的地址。

到此这篇关于新版chrome浏览器设置允许跨域的实现的文章就介绍到这了,更多相关chrome允许跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！