Safari Web 扩展中后台服务工作者发出 HTTP 请求期间出现 CORS 问题

Question

链接到 Xcode 项目的存储库来测试问题：测试 CORS 问题

\n

这个扩展使用 Manifest v3，我example.com有host_permissions

\n

"host_permissions": [\n        "*://example.com/*"\n    ]\n

\n

当我运行fetch("https://example.com")时，background.js我收到此错误：

\n

[Error] Fetch API cannot load https://example.com/ due to access control checks.\n[Error] Failed to load resource: Origin safari-web-extension://e0b5d7c7-c079-484b-8825-44d261383cb6 is not allowed by Access-Control-Allow-Origin. Status code: 200 (example.com, line 0)\n

\n

在 Safari 版本 16.0（17614.1.25.9.10、17614）和 Safari 技术预览版 153（Safari 16.0、WebKit 17615.1.4.1）中进行了测试

\n

在代码中，我使用chrome命名空间（在 Chrome 浏览器中测试它），但我遇到了与browser命名空间相同的问题。

\n

如果我在 Chrome 浏览器中运行此扩展程序而不进行任何更改，它会完美运行\n(chrome://extensions/ \xe2\x86\x92 Load Unpacked)

\n

有没有办法在不更改服务器访问控制设置的情况下避免 CORS 问题？

\n

Manifest v2 以这种方式工作得很好。

\n

更新1：

\n

目前的解决方法是使用后台脚本（在 v3 中已弃用）而不是后台服务工作线程。

\n

而不是这个：

\n

[Error] Fetch API cannot load https://example.com/ due to access control checks.\n[Error] Failed to load resource: Origin safari-web-extension://e0b5d7c7-c079-484b-8825-44d261383cb6 is not allowed by Access-Control-Allow-Origin. Status code: 200 (example.com, line 0)\n

\n

做这个：

\n

"background": {\n        "service_worker": "background.js"\n    },\n

\n

更新 2：如何让您的扩展同时适用于 Chrome 和 Safari？

\n

Chrome 仅支持

\n

 "background": {\n        "scripts": ["background.js"]\n    },\n

\n

Safari 支持两者service_worker，scripts但是当您使用 service_worker 时，它会出现 CORS 问题。

\n

因此，解决方案是在字段中传递具有不同值的扩展background。

\n

Answer 1

无需解决方法

自 2022 年 11 月 5 日起在 Safari 技术预览版中修复
https://github.com/nick-kadutskyi/safari-ext-cors-issue/issues/1#event-8471562656

自 16.4 起在 Safari 中修复

旧的解决方法

目前的解决方法是使用后台脚本（在 v3 中已弃用）而不是后台服务工作线程。

而不是这个：

"background": {
        "service_worker": "background.js"
    },

做这个：

 "background": {
        "scripts": ["background.js"]
    },

更新 2：如何让您的扩展同时适用于 Chrome 和 Safari？

Chrome 仅支持

"background": {
        "service_worker": "background.js"
    },

Safari 支持两者service_worker，scripts但是当您使用 service_worker 时，它会出现 CORS 问题。

因此，解决方案是在字段中传递具有不同值的扩展background。