[node.js] 반응 앱 오류 : ‘WebSocket’을 구성하지 못했습니다 : HTTPS를 통해로드 된 페이지에서 안전하지 않은 WebSocket 연결을 시작할 수 없습니다

React 앱을 배포하고 있지만 https를 통해 페이지를 방문하면 이상한 오류가 발생합니다.

https를 통해 페이지를 방문하면 다음 오류가 발생합니다.

SecurityError : ‘WebSocket’을 구성하지 못했습니다 : HTTPS를 통해로드 된 페이지에서 안전하지 않은 WebSocket 연결을 시작할 수 없습니다.

그러나 http를 통해 페이지로 이동하면 완벽하게 작동합니다.

문제는 내가 말할 수있는 한 웹 소켓을 사용하지 않는다는 것입니다. 코드를 검색하여 wss : 대신 https 또는 ws : 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_modules/react-dev-utils/webpackHotDevClient.js

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

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

npm run build

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

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

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}...`)
})

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

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

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

git push heroku master