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 老方法,已较少使用。
相关推荐
匆叔24 分钟前
JavaScript 性能优化实战技术
前端·javascript
子兮曰24 分钟前
🚀前端环境变量配置:10个让你少加班的实战技巧
前端·node.js·前端工程化
用户516816614584127 分钟前
Uncaught ReferenceError: __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not defined
前端·vue.js
huabuyu29 分钟前
构建极致流畅的亿级数据列表
前端
小枫学幽默31 分钟前
2GB文件传一半就失败?前端大神教你实现大文件秒传+断点续传
前端
熊猫片沃子33 分钟前
Vue 条件与循环渲染:v-if/v-else 与 v-for 的语法简介
前端·vue.js
ai产品老杨39 分钟前
打破技术壁垒,推动餐饮食安标准化进程的明厨亮灶开源了
前端·javascript·算法·开源·音视频
文心快码BaiduComate42 分钟前
来WAVE SUMMIT,文心快码升级亮点抢先看!
前端·后端·程序员
布列瑟农的星空1 小时前
html中获取容器部署的环境变量
运维·前端·后端
工会代表1 小时前
nginx配置,将前端项目配置到子路径下踩过的坑。
前端·nginx