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

25

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"
    ]
  }
}
Leo Policastro
sumber

Jawaban:

38

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 `

Pratap Sharma
sumber
saya memiliki masalah yang sama, jadi saya hanya perlu mengedit file ini di dalam modul simpul?
Versifiction
1
@Perbedaan ya. Ini harus dilakukan sampai patch reaksi-sripts baru dirilis.
Pratap Sharma
mungkin tidak boleh memodifikasi node_modulessecara manual karena ini tidak akan dilakukan pada repo
oliversisson
Jadi saya mengalami masalah yang sama dan saya menggunakan aplikasi saya untuk heroku. Saya bahkan secara paksa melakukan hanya file websocket dan menyebarkannya ke heroku tapi saya masih mendapatkan kesalahan yang sama, ada yang punya pekerjaan untuk ini? Satu-satunya hal yang belum saya coba adalah melakukan seluruh direktori node_modules.
Tyler Strouth
@ TylerStrouth Apakah ada kemungkinan Anda dapat mengedit modul simpul di Heroku ?? Setelah Anda digunakan untuk heroku itu menginstal paket yang disebutkan dalam package.json. Dengan cara ini, perubahan yang Anda buat pada file di atas juga akan diganti. Coba edit file di dalam modul simpul di heroku.
Pratap Sharma
12

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

Leo Policastro
sumber
2
ini seharusnya jawaban yang diterima
Dinesh Shekhawat
1
ini tidak bekerja untuk saya, saya mendapatkan kesalahan 404 ketika saya meluncurkan server saya secara lokal
Hugo
Maaf atas keterlambatan respons, Anda harus membuat skrip lain untuk pengembangan lokal. Sebagai contoh. "dev": "react scripts start" Anda akan menjalankan npm run devuntuk dijalankan secara lokal.
Leo Policastro
6

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.

Oliversisson
sumber
Bekerja untukku. Awalnya ia terus kembali ke 3.3.0 karena saya secara insting menjalankan perbaikan audit yang disarankan setelah instalasi npm selesai.
MarsAndBack
4

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.

Jimmy Stenke
sumber
Kedengarannya benar, terima kasih! Saya akan mencobanya dan memberi tahu Anda jika berhasil.
Leo Policastro
Saya mengalami masalah yang persis sama, saya telah menjalankan npm run build untuk menyebarkannya ke halaman GitHub tetapi tidak berhasil, jadi cobalah Heroku. Saya mendapatkan kesalahan yang disebutkan di atas, ini berfungsi pada HTTP jika saya membuat opsi untuk memuat yang tidak aman skrip Solusi untuk membuatnya aman dan membuat kesalahan ini diselesaikan akan sangat membantu!
Ganesha
@ Ganesha, maka Anda salah melakukannya. Anda perlu melakukan npm run builddan hanya mengunggah konten dalam builddirektori.
Jimmy Stenke
6
Ini masalah dengan skrip reaksi versi 3.3.0. Anda dapat menemukan dokumentasi terperinci di sini " github.com/facebook/create-react-app/pull/8079 ". Saya menurunkan reaksi terhadap skrip - 3.2.0 dan saya tidak mendapatkan kesalahan sekarang
Ganesha
1
@monsterpiece, aneh. Itu bukan hasil ketika saya menguji meskipun saya tidak menguji heroku, tetapi secara lokal. Mungkin saja env adalah masalah sehingga mungkin selalu yang terbaik untuk menyebutkannya secara eksplisit. NODE_ENV=production npm run build, dan kemudian unggah hanya builddirektori ke heroku (yaitu, build akan menjadi webroot Anda di server web, tidak perlu node di server kecuali menggunakan ssr). Membangun produksi seharusnya tidak memiliki server dev webpack bahkan termasuk, saya akan mengatakan itu bug dalam kasus itu.
Jimmy Stenke
3
  • 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"
Andres Mejias
sumber
1

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
Asad
sumber
0

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.

John Towery
sumber
untuk menambahkan buildpack SETELAH dikerahkan ke Heroku, buka halaman aplikasi Heroku-> tab 'Pengaturan' -> bagian 'Buildpacks'. Anda menambahkan mer / membuat-bereaksi-aplikasi lalu mengklik tombol 'Tambah Buildpack'.
John Towery