Mac和Window的Chrome浏览器跨域完美解决方案 | 开发调试必备（接口跨域、本地调试）

olvl.

已于 2025-02-10 18:05:28 修改

阅读量4.4k

点赞数 17

文章标签： chrome 前端 mac windows

于 2024-11-06 10:49:48 首次发布

本文链接：https://blog.csdn.net/weixin_51733280/article/details/143562371

版权

几种最简单高效的Chrome浏览器跨域解决方案：

命令行启动方式（最简单）

# Windows
chrome.exe --disable-web-security --user-data-dir=任意空文件夹路径

# Mac
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=任意空文件夹路径

或者
2.手动创建（教程清晰）

Window教程
第一步：复制一份chrome浏览器在桌面，重命名（用于区分跨域和非跨域）
在这里插入图片描述
第二步：在c盘新建一个文件夹，命名为MyChromeDevUserData
第三步：右键点击第一步复制出来的chrome浏览器，点击属性，来到快捷方式，将 --disable-web-security --user-data-dir=C:\MyChromeDevUserData,–user-data-dir粘贴在目标一栏的最后，点击确定
在这里插入图片描述
Mac教程
创建一个开启跨域的chrome

1.command+ 空格打开，输入automator回车打开automator
2.选择应用程序，点击选取
3.选择实用工具中的shell脚本，双击之后输入

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/[yourname]/MyChromeDevUserData/

在这里插入图片描述

4.关闭并重命名，选择好位置，保存到应用程序，点击存储

在这里插入图片描述

5.查看 Launchpad 中，就有这个跨域的图标了

Chrome扩展插件（推荐）

安装 “Allow CORS: Access-Control-Allow-Origin” 插件
点击插件图标开启即可
优点：无需重启浏览器，随开随用

前端临时解决方案（开发阶段）

// 使用代理服务
const proxy = {
  '/api': {
    target: 'http://目标域名',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

45 JSONP方式（适用于GET请求）

function jsonp(url, callback) {
  const script = document.createElement('script')
  script.src = url + '?callback=' + callback
  document.body.appendChild(script)
}