Bereaksi kesalahan aplikasi: Gagal membuat 'WebSocket': Koneksi WebSocket yang tidak aman mungkin tidak dimulai dari halaman yang dimuat melalui HTTPS

Saya menggunakan aplikasi Bereaksi tetapi saya mendapatkan kesalahan aneh ketika saya mengunjungi halaman melalui https.

Ketika saya mengunjungi halaman lebih dari https saya menerima kesalahan berikut:

SecurityError: Gagal membuat 'WebSocket': Koneksi WebSocket yang tidak aman mungkin tidak dimulai dari halaman yang dimuat melalui HTTPS.

Tetapi ketika saya pergi ke halaman melalui http itu berfungsi dengan baik.

Masalahnya adalah saya tidak menggunakan soket web sejauh yang saya tahu. Saya mencari-cari kode untuk melihat apakah ada permintaan untuk http yang seharusnya untuk https atau ke ws: bukan wss: tapi saya tidak melihat apa-apa.

Adakah yang pernah mengalami ini sebelumnya?

Saya termasuk salinan file package.json. Beri tahu saya jika Anda membutuhkan saya untuk mengunggah bagian kode yang lain untuk membantu debug.

Terima kasih sebelumnya.

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

Untuk orang yang menunggu skrip reaksi untuk tambalan:

Untuk pengujian lokal melalui https , Anda dapat mengedit secara manual

node_modules/react-dev-utils/webpackHotDevClient.js

Berikut kode yang Anda inginkan pada baris 62 dari file itu:

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

Untuk penyebaran, ikuti langkah-langkah di bawah ini:

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

npm run build

Dan Kemudian di package.json Anda menambahkan skrip deploy untuk bekerja dengan serve:

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

Lalu

npm deploy or yarn deploy

Semoga jawaban ini membantu Anda menyingkirkan kesalahan.

Untuk info lebih lanjut lihat di sini `

Banyak jawaban di sini benar-benar menyelesaikan masalah tetapi cara paling sederhana yang saya temukan sejak saya mengajukan pertanyaan ini adalah menambahkan paket npm serve ke dependensi Anda.

yarn add serve atau npm i serve

dan kemudian ganti skrip awal Anda dengan yang berikut ini:

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

Ini sebenarnya langsung dari membuat-bereaksi-aplikasi docs

Inilah solusi yang lebih sederhana. Turunkan peringkat react-scriptske ke 3.2.0dalam package.json(milik Anda 3.3.0).

Anda mungkin perlu menghapus package-lock.jsondan node_modules( rm -rf package-lock.json node_modules), lalu melakukan a npm i. Komit yang baru package.jsondan package-lock.jsonyang repo.

Sudah lama sejak saya bermain-main dengan reaksi, tetapi react-scriptsdibangun di atas webpack jika saya tidak salah, sehingga kemungkinan besar menggunakan webpack-dev-server untuk mempercepat pengembangan. Menggunakan websockets untuk berkomunikasi dengan klien untuk memicu pemuatan ulang saat menemukan perubahan pada disk.

Anda mungkin baru saja memulai aplikasi dalam mode pengembangan, jadi jika Anda menyebarkannya ke lingkungan produksi, Anda harus menjalankan npm run buildyang akan membuat satu set file javascript yang dapat Anda sajikan dengan server web favorit Anda.

• Buat di belakang folder dan aplikasi node.js
• Buat router ekspres di root aplikasi Anda
• Buat file server.js

Tambahkan kode ini ke 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}...`)
})

Ke pakage.json

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

Dan tambahkan proxy rute ke /folder-name-react-app/pakage.json

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

siapa pun yang berjuang dengan masalah ini pada penyebaran Anda menurunkan modul Anda untuk heroku .reac-scripts3.2.0

1. hapus package-lock.jsonfile
2. hapus node_modulesfolder
3. ganti react-scriptsversi menjadi3.2.0
4. npm install semua modul lagi

Anda perlu melihat artikel ini dari situs web Create-React-App. Ini menjelaskan cara menggunakan aplikasi Bereaksi yang dibuat dengan 'Buat-Bereaksi-Aplikasi' dengan benar yang mengarah ke buildpack spesifik untuk aplikasi Bereaksi, mars / create-react-app-buildpack, di Github yang Anda butuhkan saat membuat aplikasi Heroku.

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

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

Saya memiliki masalah yang sama dengan masalah websocket tidak aman yang dialami semua orang di sini, jadi saya menguji solusi dari artikel Create-React-App. Itu memecahkan masalah. Tidak perlu memodifikasi node_module atau apa pun.

Yang perlu Anda lakukan hanyalah perintah ini saat membuat aplikasi heroku dari CLI di root aplikasi Bereaksi:

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

kemudian:

git push heroku master

ketika Anda pergi ke situs web Anda di Heroku. itu akan berjalan seperti yang diharapkan tanpa kesalahan "websocket tidak aman".

(Saya tidak tahu bagaimana cara menambahkan mars / create-react-app buildpack untuknya SETELAH Anda sudah membuat / menggunakan ke Heroku. Saya belum sampai ke bagian itu.)

Solusi di atas tampaknya mengatasi masalah yang dimiliki oleh tim buat-reaksi-aplikasi untuk penggelaran ke Heroku.