Chrome 开发环境屏蔽 CORS 跨域限制

为何要屏蔽CORS跨域

日常开发过程中,经常会遇到请求接口如下的报错问题

Access to fetch at 'https://xxx' from origin 'http://localhost:4221' 
has been blocked by CORS policy.

有好些解决CORS跨域问题的方式,这里提供一种前端开发修改Chrome 命令的方式,来跳过CORS跨域报错。

Chrome 临时关闭 CORS跨域报错

我们可以单独创建一个专门用于开发的 Chrome 实例,启动时临时关闭 CORS 安全策略,不影响你日常正常用的浏览器。

  1. 创建一个新的浏览器快捷方式 Google Chrome Dev
    在这里插入图片描述

  2. 重新配置这个复制快捷方式的target 地址
    鼠标右键快捷方式,点击属性
    在这里插入图片描述
    在原本target 值的后面追加内容 示例如下:

--disable-web-security --user-data-dir=C:\Users\你的用户名\Desktop\Google Chrome Dev

完整target示例如下

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\Users\xi_deng\Desktop\Google Chrome Dev
  1. 正常启动 Google Chrome Dev
    在这里插入图片描述在浏览器上方出现提示,就表示已经启动成功了

注意事项

不影响主流浏览器,仅限本地开发,不要用在成产环境。

跨域的其他处理方式

方案场景说明
CORS后端控制跨域后端返回正确的跨域响应头。
代理转发本地开发Vue / React 本地代理,或 Nginx 转发跨域。
JSONP仅限 GET老方法,已较少使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可缺不可滥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值