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"
]
}
}
node_modules
secara manual karena ini tidak akan dilakukan pada repoBanyak 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
ataunpm i serve
dan kemudian ganti skrip awal Anda dengan yang berikut ini:
Ini sebenarnya langsung dari membuat-bereaksi-aplikasi docs
sumber
"dev": "react scripts start"
Anda akan menjalankannpm run dev
untuk dijalankan secara lokal.Inilah solusi yang lebih sederhana. Turunkan peringkat
react-scripts
ke ke3.2.0
dalampackage.json
(milik Anda3.3.0
).Anda mungkin perlu menghapus
package-lock.json
dannode_modules
(rm -rf package-lock.json node_modules
), lalu melakukan anpm i
. Komit yang barupackage.json
danpackage-lock.json
yang repo.sumber
Sudah lama sejak saya bermain-main dengan reaksi, tetapi
react-scripts
dibangun 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 build
yang akan membuat satu set file javascript yang dapat Anda sajikan dengan server web favorit Anda.sumber
npm run build
dan hanya mengunggah konten dalambuild
direktori.NODE_ENV=production npm run build
, dan kemudian unggah hanyabuild
direktori 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.Tambahkan kode ini ke server.js
Ke pakage.json
Dan tambahkan proxy rute ke /folder-name-react-app/pakage.json
sumber
siapa pun yang berjuang dengan masalah ini pada penyebaran Anda menurunkan modul Anda untuk heroku .
reac-scripts
3.2.0
package-lock.json
filenode_modules
folderreact-scripts
versi menjadi3.2.0
npm install
semua modul lagisumber
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:
kemudian:
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.
sumber