logo标签列表

Safari网页扩展中后台服务工作器进行HTTP请求时出现CORS问题

google-chrome-extensionsafari-extensionchrome-extension-manifest-v3
10

附有Xcode测试问题的仓库链接：测试CORS问题

此扩展使用Manifest v3，我在host_permissions中使用了example.com

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

当我在background.js中运行fetch("https://example.com")时，我会收到以下错误：

[Error] Fetch API cannot load https://example.com/ due to access control checks.
[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)

在Safari Version 16.0 (17614.1.25.9.10, 17614)和Safari Technology Preview Release 153 (Safari 16.0, WebKit 17615.1.4.1)中测试过。

在代码中使用chrome命名空间（以在Chrome浏览器中进行测试），但同样遇到了browser命名空间的问题。

如果我在Chrome浏览器中没有做任何修改地运行这个扩展程序，它就可以完美地工作(chrome://extensions/ → Load Unpacked)。

有没有一种方法可以避免改变服务器访问控制设置而避免CORS问题？

Manifest v2以这种方式正常工作。

更新1:

目前的解决方法是使用后台脚本（在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字段中使用不同的值来发送扩展程序。

2
似乎这是Safari的一个bug。 - wOxxOm
我也注意到了这个问题。在Safari中使用service_worker时，由于CORS的问题，它无法正常工作，但后台脚本仍然可以。我们已经使用两个不同的清单文件来发布我们的扩展程序，因为Firefox还不支持service_worker，所以我们也必须对Safari做同样的处理。这是悲伤的时刻。 - TranquilMarmot
@NickKadutskyi - 你应该把这个变成一个答案，以获取一些堆栈积分！ - AntonOfTheWoods
2个回答
0

无需解决方案

自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字段中使用不同的值来提供扩展。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接