Lỗi ứng dụng phản ứng: Không thể tạo 'WebSocket': Kết nối WebSocket không an toàn có thể không được bắt đầu từ một trang được tải qua HTTPS

Tôi đang triển khai ứng dụng React nhưng gặp một lỗi lạ khi tôi truy cập trang qua https.

Khi tôi truy cập trang qua https, tôi nhận được lỗi sau:

SecurityError: Không thể tạo 'WebSocket': Kết nối WebSocket không an toàn có thể không được bắt đầu từ một trang được tải qua HTTPS.

Nhưng khi tôi vào trang qua http thì nó hoạt động hoàn hảo.

Vấn đề là tôi không sử dụng websockets như tôi có thể nói. Tôi đã tìm kiếm thông qua mã để xem liệu có yêu cầu http nào phải là https hoặc tới ws: thay vì wss: nhưng tôi không thấy gì cả.

Có ai đã chạy vào đây trước?

Tôi đang bao gồm một bản sao của tệp pack.json. Hãy cho tôi biết nếu bạn cần tôi tải lên bất kỳ phần mã nào khác để giúp gỡ lỗi.

Cảm ơn trước.

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

Đối với những người đang chờ phản ứng kịch bản cho một bản vá:

Để kiểm tra cục bộ qua https , bạn có thể chỉnh sửa thủ công

node_modules/react-dev-utils/webpackHotDevClient.js

Đây là mã bạn muốn ở dòng 62 của tệp đó:

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

Để triển khai, hãy làm theo các bước dưới đây:

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

npm run build

Và sau đó trong gói.json của bạn thêm một tập lệnh triển khai để làm việc với phục vụ:

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

Và sau đó

npm deploy or yarn deploy

Hy vọng câu trả lời này sẽ giúp bạn thoát khỏi lỗi.

Để biết thêm thông tin tham khảo tại đây `

Rất nhiều câu trả lời ở đây thực sự giải quyết được vấn đề nhưng cách đơn giản nhất tôi đã tìm thấy kể từ khi tôi hỏi câu hỏi này là thêm gói npm phục vụ cho các phụ thuộc của bạn.

yarn add serve hoặc là npm i serve

và sau đó thay thế tập lệnh bắt đầu của bạn bằng cách sau:

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

Điều này thực sự nằm ngoài tài liệu ứng dụng tạo phản ứng

Đây là một giải pháp đơn giản hơn. Hạ cấp của bạn react-scriptsxuống 3.2.0trong package.json(của tôi là tại 3.3.0).

Bạn có thể cần xóa package-lock.jsonvà node_modules( rm -rf package-lock.json node_modules), sau đó thực hiện a npm i. Cam kết cả mới package.jsonvà package-lock.jsonrepo của bạn.

Đã được một thời gian kể từ khi tôi gặp rắc rối với phản ứng, nhưng react-scriptsđược xây dựng trên đầu gói web nếu tôi không nhầm, vì vậy rất có thể nó sử dụng máy chủ webpack-dev-server để tăng tốc độ phát triển. Nó sử dụng các websockets để liên lạc với khách hàng để kích hoạt tải lại nóng khi phát hiện ra những thay đổi trên đĩa.

Có lẽ bạn chỉ mới khởi động ứng dụng ở chế độ phát triển, vì vậy nếu bạn triển khai nó vào môi trường sản xuất, bạn nên chạy npm run buildđể tạo một tập hợp các tệp javascript mà bạn có thể phục vụ với máy chủ web yêu thích của mình.

• Tạo ở mặt sau của thư mục và ứng dụng node.js
• Tạo bộ định tuyến tốc hành trong thư mục gốc của ứng dụng của bạn
• Tạo một tệp server.js

Thêm mã này vào 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}...`)
})

Vào pakage.json

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

Và thêm proxy tuyến đường vào /folder-name-react-app/pakage.json

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

bất cứ ai đang vật lộn với vấn đề này khi triển khai heroku đều hạ cấp reac-scriptsmô-đun của bạn xuống 3.2.0.

1. xóa package-lock.jsontập tin
2. xóa node_modulesthư mục
3. thay thế react-scriptsphiên bản thành3.2.0
4. npm install tất cả các mô-đun một lần nữa

Bạn cần xem bài viết này từ trang web Tạo ứng dụng. Nó giải thích cách triển khai ứng dụng React được tạo bằng 'Tạo-React-App' đúng cách chỉ đến gói xây dựng cụ thể cho ứng dụng React, mars / created-Reac-app-buildpack, tại Github mà bạn cần khi tạo ứng dụng Heroku.

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

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

Tôi gặp vấn đề tương tự với sự cố websocket không an toàn mà mọi người đang gặp phải ở đây, vì vậy tôi đã thử nghiệm giải pháp từ bài viết Tạo-Phản ứng-Ứng dụng. Nó giải quyết vấn đề. Không cần phải sửa đổi node_module hoặc bất cứ điều gì.

Tất cả những gì bạn cần làm là cho chúng tôi lệnh này khi tạo ứng dụng heroku từ CLI ở thư mục gốc của ứng dụng React:

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

sau đó:

git push heroku master

khi bạn vào trang web của bạn tại Heroku. nó sẽ chạy như mong đợi mà không có bất kỳ lỗi "websocket không an toàn" nào.

(Tôi không biết cách thêm gói / ứng dụng tạo ứng dụng vào ứng dụng SAU KHI bạn đã tạo / triển khai cho Heroku. Tôi chưa có phần đó.)

Giải pháp trên dường như đang giải quyết vấn đề mà nhóm ứng dụng tạo phản ứng đã triển khai cho Heroku.