เกิดข้อผิดพลาดของแอป: ล้มเหลวในการสร้าง 'WebSocket': การเชื่อมต่อ WebSocket ที่ไม่ปลอดภัยอาจไม่ได้เริ่มจากหน้าเว็บที่โหลดผ่าน HTTPS

ฉันกำลังปรับใช้แอป React แต่ได้รับข้อผิดพลาดแปลก ๆ เมื่อฉันเข้าชมหน้านี้ผ่าน https

เมื่อฉันไปที่หน้ามากกว่า https ฉันได้รับข้อผิดพลาดต่อไปนี้:

SecurityError: ล้มเหลวในการสร้าง 'WebSocket': การเชื่อมต่อ WebSocket ที่ไม่ปลอดภัยอาจไม่เริ่มต้นจากหน้าเว็บที่โหลดผ่าน HTTPS

แต่เมื่อฉันไปที่หน้าผ่าน http มันทำงานได้อย่างสมบูรณ์

ปัญหาคือฉันไม่ได้ใช้ websockets เท่าที่ฉันจะบอกได้ ฉันค้นหารหัสเพื่อดูว่ามีคำขอ HTTP ที่ควรจะเป็น https หรือไปที่ ws: แทนที่จะเป็น wss: แต่ฉันไม่เห็นอะไรเลย

มีใครเคยใช้มาก่อนหรือไม่

ฉันกำลังรวมสำเนาของไฟล์ 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"
    ]
  }
}

สำหรับผู้ที่รอการตอบสนองสคริปต์สำหรับแพทช์:

สำหรับการทดสอบในท้องถิ่นผ่าน 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

หวังว่าคำตอบนี้จะช่วยคุณกำจัดข้อผิดพลาด

สำหรับข้อมูลเพิ่มเติมดูที่นี่ `

คำตอบมากมายที่นี่แก้ปัญหาได้จริง แต่วิธีที่ง่ายที่สุดที่ฉันพบตั้งแต่ฉันถามคำถามนี้คือการเพิ่มแพ็กเกจ npm ให้บริการสำหรับการอ้างอิงของคุณ

yarn add serve หรือ npm i serve

จากนั้นแทนที่สคริปต์เริ่มต้นของคุณด้วยสิ่งต่อไปนี้:

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

นี้เป็นจริงตรงออกมาจากสร้างปฏิกิริยาแอปเอกสาร

นี่เป็นวิธีที่ง่ายกว่า ปรับลดของคุณ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เพื่อซื้อคืน

เป็นเวลานานแล้วที่ฉันยุ่งกับปฏิกิริยา แต่react-scriptsถูกสร้างขึ้นบน webpack ถ้าฉันไม่เข้าใจผิดดังนั้นจึงมักใช้ webpack-dev-server เพื่อเร่งการพัฒนา มันใช้ websockets เพื่อสื่อสารกับลูกค้าเพื่อทริกเกอร์โหลดร้อนเมื่อพบการเปลี่ยนแปลงบนดิสก์

คุณอาจเพิ่งเริ่มต้นแอปพลิเคชันในโหมดการพัฒนาดังนั้นหากคุณปรับใช้กับสภาพแวดล้อมการผลิตคุณควรเรียกใช้npm run buildซึ่งจะสร้างชุดของไฟล์จาวาสคริปต์ที่คุณสามารถให้บริการกับเว็บเซิร์ฟเวอร์ที่คุณชื่นชอบ

• สร้างที่ด้านหลังของโฟลเดอร์และแอป 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"

ทุกคนที่กำลังดิ้นรนกับปัญหานี้ในHerokuการใช้งานปรับลดคุณโมดูลreac-scripts3.2.0

1. ลบpackage-lock.jsonไฟล์
2. ลบnode_modulesโฟลเดอร์
3. แทนที่react-scriptsรุ่นเป็น3.2.0
4. npm install โมดูลทั้งหมดอีกครั้ง

คุณต้องอ่านบทความนี้จากเว็บไซต์ Create-React-App มันอธิบายวิธีการปรับใช้แอป React ที่สร้างด้วย 'Create-React-App' อย่างถูกต้องซึ่งชี้ไปที่ buildpack เฉพาะสำหรับแอป React mars / create-react-app-buildpack ที่ Github ที่คุณต้องการเมื่อสร้างแอป Heroku

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

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

ฉันมีปัญหาเดียวกันกับปัญหา websocket ที่ไม่ปลอดภัยที่ทุกคนกำลังมีที่นี่ดังนั้นฉันทดสอบวิธีการแก้ปัญหาจากบทความ Create-React-App มันแก้ปัญหาได้ ไม่จำเป็นต้องแก้ไข node_module หรืออะไรก็ตาม

สิ่งที่คุณต้องทำคือใช้คำสั่งนี้เมื่อสร้างแอป heroku จาก CLI ที่รูทของแอป React:

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

แล้ว:

git push heroku master

เมื่อคุณไปที่เว็บไซต์ของคุณที่ Heroku มันจะทำงานตามที่คาดไว้โดยไม่มีข้อผิดพลาด "ไม่ปลอดภัย websocket"

(ฉันไม่ทราบวิธีการเพิ่ม mars / create-react-app buildpack หลังจากที่คุณสร้าง / ปรับใช้กับ Heroku แล้วฉันยังไม่ได้ไปยังส่วนนั้น)

วิธีการแก้ปัญหาข้างต้นดูเหมือนว่าจะแก้ไขปัญหาที่ทีมงานสร้างแอปปฏิกิริยาตอบสนองสำหรับการปรับใช้กับ Heroku