Chrome 扩展 - 尝试使用清单 v3 从后台脚本中获取 fetch() 时出现 CORS 错误

Question

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

注意：如果我转换manifest.json到版本 2 - 一切正常。但对于 v3 它给出了

从源“chrome-extension://exampleid”获取“https://example.com/api/user/login”的访问已被 CORS 策略阻止：不存在“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));
};

Answer 1

这是 Chrome 的一个错误，它在重新启用扩展程序时没有应用正确的策略主机设置。如果您使用“94.0.4606.54（官方版本）”以下的任何版本，则必须在重新启用扩展后手动重新加载（单击刷新按钮）。

在这里报告错误后，我被告知该错误已修复提交修复，并且它将成为 Chrome 94 的一部分。

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