VS Code调试时如何启用Chrome的CORS扩展？

嘿，我来帮你搞定这个头疼的问题！

首先得搞清楚为啥调试时CORS扩展没用：VS Code启动调试用的Chrome是独立的干净实例，它不会加载你平时浏览器里装的扩展和用户配置，所以你的CORS插件自然就没生效啦。下面给你两个可行的解决方案：

方案一：直接在调试配置中关闭Chrome同源策略（推荐，无需依赖扩展） #

修改你的launch.json，添加runtimeArgs参数，直接让Chrome放宽CORS限制：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "runtimeArgs": [
        "--disable-web-security",
        "--user-data-dir=${workspaceRoot}/.chrome-debug-profile"
      ]
    }
  ]
}

• --disable-web-security：直接关闭Chrome的同源策略检查，从根源解决CORS问题
• --user-data-dir：指定一个专属的调试用户目录，避免和你日常使用的Chrome实例冲突，调试会话的配置也会存在这里

方案二：加载你已安装的CORS扩展 #

如果你非要用习惯的CORS插件，得先拿到扩展的ID或者本地路径：

1. 打开Chrome，输入chrome://extensions/进入扩展管理页
2. 开启右上角的「开发者模式」
3. 找到你的CORS扩展，复制它的ID（一串乱码似的字符串），或者直接复制扩展的本地文件夹路径

然后把扩展加载配置加到launch.json里：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "runtimeArgs": [
        // 用扩展本地路径的写法
        "--load-extension=/Users/yourname/Library/Application Support/Google/Chrome/Default/Extensions/abcdef1234567890/"
        // 或者用扩展ID的写法
        // "--load-extension=abcdefghijklmnopqrstuvwxyzabcdef"
      ]
    }
  ]
}

注意：用本地路径的方式更稳定，因为ID可能会因为扩展更新变化。

个人更推荐方案一，毕竟调试环境下关闭安全限制完全没问题，还不用依赖第三方扩展，省心又高效！

内容的提问来源于stack exchange，提问作者Marcelo