socket長連接運行在http協(xié)議上時胡岔，瀏覽器報出錯誤摄乒。在使用Apache反向代理，React的serviceWorker會報出錯誤嗤军，如下所示：
Error during service worker registration: DOMException: Only secure origins are allowed (see: [https://goo.gl/Y0ZkNV](https://goo.gl/Y0ZkNV)).
之前一直是瀏覽器報出的注盈，我用靜態(tài)頁面測試下，沒報出這個錯誤叙赚，尷尬了老客，是react報出的。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
websocket的錯誤是由registerServiceWorker();引起胧砰，打開registerServiceWorker文件，可以看到這段代碼：
function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
}
}
};
};
})
.catch(error => {
//here
console.error('Error during service worker registration:', error);
});
}
在index.js文件中苇瓣，注釋掉這段代碼尉间，如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// registerServiceWorker();
運行項目時，將沒有報錯，如下所示：
參考網(wǎng)站：
- 錯誤解決過程： https://translate.google.com/translate?hl=en&sl=en&tl=zh-CN&u=https%3A%2F%2Fgithub.com%2Ffacebook%2Fcreate-react-app%2Fissues%2F2413
- chrome安全策略： https://translate.googleusercontent.com/translate_c?depth=1&hl=en&rurl=translate.google.com&sl=en&sp=nmt4&tl=zh-CN&u=https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features&xid=17259,15700023,15700124,15700149,15700168,15700186,15700190,15700201,15700208&usg=ALkJrhh93ijJd47ftZNjhWw0RhlGn34pvg
- create-react-app源碼地址： https://github.com/facebook/create-react-app/blob/e898215b7ffcc436306e209227fcf393d134fe69/packages/react-scripts/template/src/index.js#L8
