Firefox/Chrome devtools 模式导致 VSCode 调试出现 CORS 错误答案

【问题标题】：Firefox/Chrome devtools mode causes CORS errors with VSCode DebuggingFirefox/Chrome devtools 模式导致 VSCode 调试出现 CORS 错误
【发布时间】：2022-07-18 02:06:22
【问题描述】：

从 VSCode 调试器（在 DevTools 模式下运行）启动 Chrome/Firefox 总是会导致 API 请求出现 CORS 错误，但在普通 Firefox/Chrome 浏览器中可以正常工作。

将 Laravel 用于 API 和 CORS enabled。 Nextjs (React) 用于前端，我的 api 请求 https://site.test/api/info 来自前端 https://localhost:3000/home 在正常使用 Firefox/Chrome 时工作正常。

但是，一旦我使用 VSCode 调试器（安装了 Firefox 调试器扩展），它就会在控制台中出现 CORS 错误。

launch.json（用于 VS 代码调试器）

  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "name": "Launch Firefox against localhost",
      "url": "https://localhost:3000/home",
      "webRoot": "${workspaceFolder}",
      "pathMappings": [
        {
          "url": "webpack://_n_e",
          "path": "${workspaceFolder}"
        }
      ]
    }
  ]
}

Firefox DevTools 模式 CORS 错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://site.test/api/info. (Reason: CORS request did not succeed). Status code: (null)

有谁知道如何解决这个问题？无法访问调试器和断点并不好玩。

【问题讨论】：

“CORS 请求未成功”错误消息实际上表明问题与 CORS 无关。它的字面意思是请求发送失败。或者换句话说，这意味着事务从未达到从您尝试向其发送请求的服务器获得响应的地步。因此，它通常可以指示网络级别的故障——例如 SSL 故障。见developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/…
我想知道 Firefox devtools 模式是否会与 https/http 状态混淆。我必须将 localhost（nextjs 服务器）代理为 https 才能在标准 Firefox 浏览器中工作。
在 Mozilla 的 Matrix 服务器上的#devtools 室中询问可能会很好，地址为matrix.to/#/@mozilla-irc:matrix.org
我会检查一下，虽然这个问题也出现在 Chrome devtools 中，并且在标准 Chrome 中正常工作。只是以 Firefox 为例。

标签： visual-studio-code cors google-chrome-devtools firefox-developer-tools

【解决方案1】：

好的，我让它工作了，它需要两件事。

vscode 打开 Firefox 调试时打开后端的 url。比如我的api在这里运行：https://localhost:7188/api/。我打开了 https://localhost:7188/swagger/index.html。

如果证书是自签名的并给出安全警告，请允许并继续。

由于某种原因，当您从 VSCode 进行调试时，它并没有看到请求来自浏览器中的 URL。

在 webApi 服务器上，我将其设置为允许 https://localhost:8080/。这适用于普通浏览器，但在 Firefox 处于“远程控制”下时会失败。

我不得不将我的 CORS 政策从允许 https://localhost:8080/ 更改为允许任何来源。然后它就开始工作了。

options.AddPolicy(name: "MyPolicy",
            policy =>
            {
                policy.AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod();
                //.WithMethods("PUT", "DELETE", "GET");
            });

剩下的唯一问题是，每次从 VSCode 开始调试时，我似乎都必须接受自签名证书。我希望我不必每次都接受它，因为 api 方面。

不确定，但可能有办法将证书导入 Firefox，以便它在“远程控制”下记住它们。

在 Chrome 中有一种方法可以做到这一点，但我试过了，但它不适用于我的证书。

【讨论】：