web-dev-qa-db-ja.com

Reactアプリのエラー：「WebSocket」の構築に失敗しました：安全でないWebSocket接続がHTTPS経由でロードされたページから開始されない可能性があります

Reactアプリをデプロイしていますが、httpsでページにアクセスすると奇妙なエラーが発生します。

Httpsでページにアクセスすると、次のエラーが表示されます。

SecurityError： 'WebSocket'の構築に失敗しました：安全でないWebSocket接続がHTTPS経由でロードされたページから開始されない可能性があります。

しかし、httpでページに移動すると、完全に機能します。

問題は、私が知る限り、WebSocketを使用していないことです。コードを検索して、httpsまたはwss：ではなく、httpへのリクエストがあるかどうかを確認しましたが、何も表示されません。

これまでに誰かに遭遇したことがありますか？

Package.jsonファイルのコピーを含めています。デバッグに役立つコードの他の部分をアップロードする必要があるかどうかをお知らせください。

前もって感謝します。

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "baffle": "^0.3.6",
    "cross-env": "^6.0.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-player": "^1.14.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-typist": "^2.0.5",
    "webpack-hot-dev-clients": "^2.0.2"
  },
  "scripts": {
    "start": "cross-env react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
node.jsreactjs
25
Leo Policastro

ここで多くの答えが実際に問題を解決しますが、この質問をして以来私が見つけた最も簡単な方法は、npmパッケージ serve を依存関係に追加することです。

yarn add serveまたはnpm i serve

次に、起動スクリプトを次のように置き換えます。

"scripts": {
    "start": "serve -s build",
}

これは実際にはcreate-react-app docs

10
Leo Policastro

パッチの反応スクリプトを待っている人々のために：

https経由のローカルテストの場合、手動で編集できます

node_modules/react-dev-utils/webpackHotDevClient.js

そのファイルの62行目に必要なコードを次に示します。

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

以下の手順に従って展開します：

npm install -g serve // This can be done locally too

npm run build

次に、package.jsonに、サーブと連携するデプロイスクリプトを追加します。

"scripts": {
    "deploy": "serve -s build",
}

その後

npm deploy or yarn deploy

この答えがあなたがエラーを取り除くのに役立つことを願っています。

詳細は こちら `を参照してください

36
Pratap Sharma

これがより簡単な解決策です。 react-scriptsで3.2.0をpackage.jsonにダウングレードします（鉱山は3.3.0にありました）。

package-lock.jsonおよびnode_modules（rm -rf package-lock.json node_modules）を削除してから、npm iを実行する必要がある場合があります。新しいpackage.jsonとpackage-lock.jsonの両方をリポジトリにコミットします。

5
oliversisson

反応をいじっていたのは久しぶりですが、react-scriptsは、誤解しない限りwebpackの上に構築されているので、webpack-dev-serverを使用して開発を高速化する可能性が高いです。クライアントと通信してディスク上の変更を検出したときにホットリロードをトリガーするために、WebSocketを使用します。

おそらくアプリケーションを開発モードで開始しているだけなので、本番環境にデプロイする場合は、npm run buildを実行して、お気に入りのWebサーバーで提供できる一連のJavaScriptファイルを作成する必要があります。

4
Jimmy Stenke
  • フォルダーとnode.jsアプリの後ろに作成
  • アプリのルートにエクスプレスルーターを作成する
  • Server.jsファイルを作成する

このコードをserver.jsに追加します

const express = require('express')
const path = require('path')
const app = express()

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')))
  // Handle React routing, return all requests to React app
  app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'))
  })
}
const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`API listening on port ${port}...`)
})

Pakage.jsonに

,
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

ルートプロキシを/folder-name-react-app/pakage.jsonに追加します

  "proxy": "http://localhost:8080"
3
Andres Mejias

この記事はCreate-React-App Webサイトから参照する必要があります。 React「Create-React-App」で正しく作成されたアプリは、React app、mars/create-react- app-buildpack。GithubでHerokuアプリを作成するときに必要でした。

https://create-react-app.dev/docs/deployment/#herok

https://github.com/mars/create-react-app-buildpack

誰もが抱えている安全でないWebSocketの問題でも同じ問題が発生したため、Create-React-Appの記事のソリューションをテストしました。問題は解決しました。 node_moduleなどを変更する必要はありません。

React app：のルートでCLIからherokuアプリを作成する場合、このコマンドを使用するだけです。

heroku create --buildpack mars/create-react-app

次に：

git Push heroku master

herokuのWebサイトにアクセスしたとき。 「安全でないwebsocket」エラーなしで期待どおりに実行されます。

（Herokuにすでに作成/デプロイした後で、mars/create-react-appビルドパックを追加する方法がわかりません。その部分はまだわかりません。）

上記のソリューションは、Herokuにデプロイするためにcreate-react-appのチームが持つ問題に対処しているようです。

0
John Towery

herokデプロイメントでこの問題に苦しんでいる人は、あなたのreac-scriptsモジュールを3.2.0にダウングレードします。

  1. package-lock.jsonファイルを削除
  2. node_modulesフォルダを削除
  3. react-scriptsバージョンを3.2.0に置き換えます
  4. npm install再びすべてのモジュール
0
Asad