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

略

I.前言：

在前端开发过程中，我们会遇到跨域问题，一些浏览器设置默认是不允许跨域的。Chrome浏览器是目前使用人数最多的浏览器，由于chrome浏览器的更新迭代比较频繁，所以每个版本的设置有所不同，我的系统是macOSBig Sur10.15.7，Chrome版本为94.0.4606.61，本文详细讲解该版本Chrome浏览器设置允许跨域的三种实现方式。

II.方法一：启动控制台

1.打开Chrome浏览器，打开“开发者工具” （快捷键：option + command + i）

2.打开“Network”，按 F5 刷新页面

3.点击左侧菜单栏上的第二个选项卡“Console”

4.粘贴下面代码并执行

fetch("https://i.snssdk.com",{"credentials":"include","headers":{"content-type":"application/json"},"referrer":"https://i.snssdk.com/","referrerPolicy":"strict-origin-when-cross-origin","body":"{\"id\":\"97\",\"uid\":\"1146345\",\"token\":\"b4a492af3d1d23xxxxxxxxxxxxxxxx\",\"sign\":\"25150a04c5a66f5xxxxxxxxxxxxxxxx\",\"params\":{\"offset\":20,\"count\":20}}","method":"POST","mode":"cors"}).then(a=>a.json()).then(a=>console.log(a))

5.控制台如出现报错：

Access to fetch at 'https://i.snssdk.com/' from origin 'http://127.0.0.1:5500' 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.

则说明当前环境无法跨域请求，需要进行设置。

III.方法二：chrome插件

1.打开chrome网页店，搜索“allow cors ”

2.添加对应的扩展，并在地址栏加上红色的扩展图标进行开启处理。

3.重新刷新要请求的页面，看是否可以请求成功

IV.方法三：设置浏览器参数

1.打开Chrome浏览器，输入地址栏：chrome://flags/

2.使用 Ctrl + F 进行快速查找，输入“cors”

3.找到“Experimental Web Platform features”和“CORS For localhost”，将它们的状态都改为“Enabled”。

4.重启浏览器。

5.重新打开一个本地页面，在其中进行跨域请求，此时应该不会因为原有的CORS的影响导致跨域错误了。

V.结果对比：

三种方法的对比，chrome插件和控制台调试是一次请求有效，设置浏览器参数是全局允许。开发时推荐使用可局部配置允许跨域访问的两种方式，避免全局修改带来的安全风险。

以上的文字是介绍第一种方式。如果您还有任何疑问，欢迎访问我的博客阅读更完整的教程：https://jexlzj.github.io/2022/06/16/new-chrome-cross-domain.html