Service Worker 注册期间出错：DOMException：无法为 scope.An 注册 ServiceWorker 发生 SSL 证书错误

Question

我正在尝试将我的 apache 配置为运行 React 应用程序。它运行在本地主机上。但是我想将 http 重定向到 https。当我执行该服务时，worker.js 不起作用。我收到 DOM 异常。我也用过 SSL 证书

服务-worker.js

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
   "/precache-manifest.7167b3346c21d4ebe11be4972eadad7c.js"
);

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
  }
});

workbox.core.clientsClaim();

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {

  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
});

这是我的 Apache 配置

我的应用所在的主机运行ning

<VirtualHost *:81>
ProxyPreserveHost On
ServerName 10.177.218.172
RemoteIPHeader X-Client-IP
ErrorLog C:\APACHE\Apache24\logs\New_error.log
CustomLog C:\APACHE\Apache24\logs\New_error.log combined
LogLevel debug
ShibCompatValidUser Off
DocumentRoot "${SRVROOT}/Example"
</VirtualHost>

使用反向代理获取https

<VirtualHost *:91>

SSLEngine On
SSLProxyEngine On 
SSLCertificateFile "root.crt"
SSLCertificateKeyFile  "server.key"
SSLHonorCipherOrder on
SSLProtocol all -SSLv2 -SSLv3 -TLSv1 -TLSv1.1 
SSLCipherSuite HIGH:MEDIUM:!aNULL:!MD5:!SEED:!IDEA
SSLProxyVerify none
SSLProxyCheckPeerCN off
SSLProxyCheckPeerName off

RequestHeader set X-Forwarded-Proto "https"
RequestHeader set X-Forwarded-Port "91"
RequestHeader set REMOTE_ADDR "10.217.12.12"
RequestHeader set HOST "10.217.12.12:91"


<Location />

    ProxyPass "http://10.217.12.12:81/"
    ProxyPassReverse "http://10.217.12.12/"

</Location>
</VirtualHost>

我在运行 10.217.12.12:91

时收到此错误

serviceWorker.js:97 Error during service worker registration: DOMException: Failed to register a 
ServiceWorker for scope ('https://10.217.12.12:91/') with script ('https://10.217.12.12:91/service- 
worker.js'): An SSL certificate error occurred when fetching the script.

有人有办法解决这个问题吗？

Answer 1

仅限服务工作者运行在安全模式下。 React 必须知道 ssl 文件位置。为 React 应用程序获取 ssl 证书，1. 对于 linux，将其添加到您的 .env 文件中，

 SKIP_PREFLIGHT_CHECK=true
    SSL_CERT_FILE=./path/to/cert
    SSL_KEY_FILE=./path/to/keyfile.pem
    HTTPS=true

或者，在您的 package.json

"scripts": {
    "start": "set HTTPS=true && react-scripts start",
    "build": "react-scripts build",
     . 
     ..

为windows,

($env:HTTPS = "true") - 和 (npm start)

阅读此内容了解更多信息， React: Using HTTPS in Development

Service Worker 注册期间出错：DOMException：无法为 scope.An 注册 ServiceWorker 发生 SSL 证书错误

Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope.An SSL certificate error occurred

reactjs

apache

ssl

service-worker

domexception