为啥我的服务人员看到“错误 - 只允许安全来源”？

Posted 2023-02-16

【中文标题】为啥我的服务人员看到“错误 - 只允许安全来源”？

【英文标题】：Why am I seeing "Error - Only secure origins are allowed" for my service worker?为什么我的服务人员看到“错误 - 只允许安全来源”？

【发布时间】：2017-05-13 09:25:54

【问题描述】：

当我尝试在我的渐进式 Web 应用页面上添加服务工作者时，为什么浏览器控制台会显示以下错误？

ERROR "Uncaught (in promise) DOMException: Only secure origins are allowed

JS代码：

(function () 
    'use strict';

    // TODO add service worker code here
    if ('serviceWorker' in navigator) 
        navigator.serviceWorker
            .register('service-worker.js')
            .then(function () 
                console.log('Service Worker Registered');
            );
    
)();

【参考方案1】：

来自Service Worker FAQ：

问：我收到一条关于“仅允许安全来源”的错误消息。为什么？

答： Service Worker 仅适用于“安全来源”（基本上是 HTTPS 网站），这符合优先使用安全来源以获得强大新功能的政策。不过http://localhost 也被认为是安全来源，所以如果可以的话，在 localhost 上开发是避免此错误的简单方法。

您也可以使用--unsafely-treat-insecure-origin-as-secure 命令行标志。该标志必须与--user-data-dir 标志结合使用。例如：

$ ./chrome --user-data-dir=/tmp/foo --unsafely-treat-insecure-origin-as-secure=http://your.insecure.site

如果您想使用自签名证书在 https://localhost 上进行测试，请执行以下操作：

$ ./chrome --allow-insecure-localhost https://localhost

您可能还会发现--ignore-certificate-errors 标志很有用。

【参考方案2】：

您可以像这样在注册 service worker 之前检查协议， location.protocol === 'https:' && serviceWorker.register('service-worker.js')

【参考方案3】：

尝试使用 http://127.0.0.1:8080 用于本地托管 代替 http://192.168.29.53:8080

【参考方案4】：

在 chrome 中输入chrome://flags

搜索“安全来源”

然后点击Enabled，重新启动chrome。

【讨论】：

这完全有道理，它可以解决问题 - 但至少在我的情况下它不起作用。有什么建议吗？