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

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

为何要屏蔽CORS跨域

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

js 复制代码
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示例如下

js 复制代码
"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 老方法,已较少使用。
相关推荐
望获linux13 分钟前
【Linux基础知识系列:第一百四十篇】理解SELinux与系统安全
linux·运维·服务器·数据库·chrome·macos
lumi.18 分钟前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰19 分钟前
vue核心原理实现
前端·javascript·vue.js
影子信息22 分钟前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java1 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19981 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店2 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
excel2 小时前
楖览:Vue3 源码研究导读
前端
proud12122 小时前
开源的 CSS 动画库
前端·css·开源
折翼的恶魔2 小时前
HTML媒体标签
前端·html