Reagir erro do aplicativo: falha ao criar 'WebSocket': uma conexão insegura do WebSocket não pode ser iniciada a partir de uma página carregada por HTTPS

Estou implantando um aplicativo React, mas estou recebendo um erro estranho quando visito a página em https.

Quando visito a página por https, recebo o seguinte erro:

SecurityError: falha ao construir 'WebSocket': Uma conexão insegura do WebSocket não pode ser iniciada a partir de uma página carregada por HTTPS.

Mas quando eu vou para a página sobre http, ele funciona perfeitamente.

O problema é que não estou usando websockets até onde sei. Pesquisei o código para ver se há uma solicitação para http que deve ser https ou ws: em vez de wss: mas não vejo nada.

Alguém já se deparou com isso antes?

Estou incluindo uma cópia do arquivo package.json. Informe-me se você precisar fazer upload de outras partes do código para ajudar na depuração.

Desde já, obrigado.

{
  "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"
    ]
  }
}

Para pessoas que aguardam scripts de reação para um patch:

Para testes locais por https , você pode editar manualmente

node_modules/react-dev-utils/webpackHotDevClient.js

Aqui está o código que você deseja na linha 62 desse arquivo:

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

Para implantação, siga as etapas abaixo:

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

npm run build

E, em seguida, no package.json, adicione um script de implantação para trabalhar com o serve:

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

E depois

npm deploy or yarn deploy

Espero que esta resposta ajude você a se livrar do erro.

Para mais informações, consulte aqui `

Muitas respostas aqui realmente resolvem o problema, mas a maneira mais simples que encontrei desde que fiz essa pergunta é adicionar o pacote npm serve às suas dependências.

yarn add serve ou npm i serve

e substitua seu script de inicialização pelo seguinte:

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

Este é realmente em linha reta fora dos criar-reagem-app docs

Aqui está uma solução mais simples. Faça o downgrade react-scriptspara o seu 3.2.0no package.json(o meu estava em 3.3.0).

Pode ser necessário excluir seu package-lock.jsone node_modules( rm -rf package-lock.json node_modules) e, em seguida, a npm i. Confirme seu novo package.jsone package-lock.jsono repo.

Já faz um tempo desde que eu estava brincando com o react-scriptsreact , mas é construído sobre o webpack, se não me engano, por isso provavelmente usa o webpack-dev-server para acelerar o desenvolvimento. Ele usa websockets para se comunicar com o cliente para acionar uma recarga a quente quando descobre alterações no disco.

Provavelmente, você está apenas iniciando o aplicativo no modo de desenvolvimento; portanto, se estiver implantando-o em um ambiente de produção, execute- npm run buildo para criar um conjunto de arquivos javascript que você pode servir com seu servidor da web favorito.

• Crie na parte de trás da pasta e do aplicativo node.js.
• Crie um roteador expresso na raiz do seu aplicativo
• Crie um arquivo server.js

Adicione esse código ao 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}...`)
})

Em para pakage.json

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

E adicione o proxy de rota em /folder-name-react-app/pakage.json

  "proxy": "http://localhost:8080"

qualquer pessoa que esteja enfrentando problemas com a implantação do heroku fará o downgrade do reac-scriptsmódulo para 3.2.0.

1. remover package-lock.jsonarquivo
2. remover node_modulespasta
3. substituir react-scriptsversão para3.2.0
4. npm install todos os módulos novamente

Você precisa consultar este artigo no site Create-React-App. Ele explica como implantar o aplicativo React criado com 'Create-React-App' corretamente, que aponta para o buildpack específico para o aplicativo React, mars / create-react-app-buildpack, no Github que você precisava ao criar o aplicativo Heroku.

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

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

Eu tive o mesmo problema com o problema inseguro de websocket que todos estão tendo aqui, então testei a solução no artigo Create-React-App. Resolveu o problema. Não há necessidade de modificar o node_module ou qualquer coisa.

Tudo o que você precisa fazer é usar este comando ao criar o aplicativo heroku a partir da CLI na raiz do aplicativo React:

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

então:

git push heroku master

quando você acessa seu site na Heroku. ele será executado conforme o esperado, sem nenhum erro "inseguro da websocket".

(Não sei como adicionar o builds mars / create-react-app depois que você já criou / implantou no Heroku. Ainda não cheguei a essa parte.)

A solução acima parece estar abordando o problema que a equipe do create-react-app tem para implantar no Heroku.