Chrome 扩展 - 尝试使用清单 v3 从后台脚本中获取（）时出现 CORS 错误答案

【问题标题】：Chrome Extension - Getting CORS error when trying to fetch() from background script with manifest v3Chrome 扩展 - 尝试使用清单 v3 从后台脚本中获取（）时出现 CORS 错误
【发布时间】：2021-09-25 10:20:15
【问题描述】：

当我尝试从 Chrome 扩展程序的后台脚本发出请求时，我收到了 CORS 错误。后台脚本与 webpack 捆绑在一起。

注意：如果我将 manifest.json 转换为版本 2 - 一切正常。但是在 v3 中，它提供了

CORS 政策已阻止从源“chrome-extension://exampleid”获取“https://example.com/api/user/login”的访问权限：否“Access-Control-Allow-Origin”请求的资源上存在标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

manifest.json

{
  "name": "__CE_APP_NAME__",
  "version": "__CE_APP_VERSION__",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.bundle.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": [
        "https://example.com/*"
      ],
      "js": ["content.bundle.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [ "images/*", "*.css" ],
      "matches": [
        "https://example.com/*"
      ]
    }
  ],
  "permissions": [
    "storage",
    "unlimitedStorage",
    "cookies",
    "identity"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

background.js

chrome.runtime.onMessage.addListener((req) => {
  if (req.type === 'auth/login') {
    login(req.payload);
  }

  return true;
});

interface LoginCredentials {
  email: string;
  password: string;
}

const login = (data: LoginCredentials) => {
  fetch(`${API_BASE_URL}/user/login`, {
    method: 'POST',
    body: new URLSearchParams({
      email: data.email,
      password: data.password
    })
  })
    .then((response) => console.log(response))
    .catch((error) => console.log(error));
};

【问题讨论】：

有没有人幸运地解决了这个问题？我也遇到了同样的问题
您是否正确刷新了您的扩展程序？
问题是，如果我关闭扩展程序并重新打开它而不手动刷新它会给我 CORS 错误，我正在尝试获得一个不需要的解决方案手动刷新
如果你这样做，请告诉我。我每次都在手动刷新。它需要刷新 service worker。

标签： javascript google-chrome-extension cors service-worker chrome-extension-manifest-v3

【解决方案1】：

这是 Chrome 的错误，它在重新启用扩展程序时未应用正确的策略主机设置。如果您使用低于“94.0.4606.54 (Official Build)”的任何版本，您必须在重新启用扩展后手动重新加载（单击刷新按钮）。

在报告错误here 后，我被告知该错误已通过this 提交修复，它将成为 Chrome 94 的一部分。

如果您现在下载 Beta，您会注意到该错误已修复，并将于 2021 年 9 月 21 日正式发布（明天，截至本答案）。可以查看日程here

【讨论】：

【解决方案2】：

这就是我解决这个问题的方法（附加到清单）：

"content_security_policy": {
  "extension_pages": "default-src 'self'; connect-src https://* data: blob: filesystem:;"
}

default-src 'self' 默认使用，chrome 网上商店无论如何都会要求它。如果未设置，则会出错：
必须指定 CSP 指令“script-src”（显式或通过“default-src”隐式指定）并且必须仅将安全资源列入白名单。
connect-src https://* data: blob: filesystem:; 需要通过 cors 和

适用于 XMLHttpRequest (AJAX)、WebSocket、fetch() 或 EventSource。如果不允许，浏览器会模拟 400 HTTP 状态代码。

我找到了信息here

【讨论】：

【解决方案3】：

这是我的解决方案：

我相信它不起作用，因为我只是在做 Load Unpacked 并希望它会刷新扩展。我想它没有完全刷新，所以需要做的是一个额外的步骤。在扩展页面点击扩展右下角的刷新按钮。

希望很快会有更好的自动化方式来进行某种热重载。

【讨论】：