React app error: 'WebSocket' oluşturulamadı: HTTPS üzerinden yüklenen bir sayfadan güvenli olmayan bir WebSocket bağlantısı başlatılamayabilir

Bir React uygulaması dağıtıyorum ama sayfayı https üzerinden ziyaret ettiğimde garip bir hata alıyorum.

Sayfayı https üzerinden ziyaret ettiğimde aşağıdaki hatayı alıyorum:

SecurityError: 'WebSocket' oluşturulamadı: HTTPS üzerinden yüklenen bir sayfadan güvenli olmayan bir WebSocket bağlantısı başlatılamayabilir.

Ama http üzerinden sayfaya gittiğimde mükemmel çalışıyor.

Sorun, anlayabildiğim kadarıyla websockets kullanmıyorum. Ben https veya ws: wss yerine http gerekir bir istek olup olmadığını görmek için kod üzerinden arama: ama hiçbir şey görmüyorum.

Daha önce birisi bunun üzerinde çalıştı mı?

Package.json dosyasının bir kopyasını ekliyorum. Hata ayıklamaya yardımcı olmak için kodun başka bir bölümünü yüklememe ihtiyacınız varsa bana bildirin.

Şimdiden teşekkürler.

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

Bir yama için tepki komut dosyaları bekleyen kişiler için:

Https üzerinden yerel test için manuel olarak düzenleyebilirsiniz

node_modules/react-dev-utils/webpackHotDevClient.js

İşte bu dosyanın 62. satırında isteyeceğiniz kod:

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

Dağıtım için aşağıdaki adımları izleyin:

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

npm run build

Ve sonra package.json ile serve ile çalışmak için bir dağıtım betiği ekleyin:

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

Ve sonra

npm deploy or yarn deploy

Umarım bu cevap hatadan kurtulmanıza yardımcı olur.

Daha fazla bilgi için buraya bakın`

Burada birçok cevap gerçekten sorunu çözmek ama bu soruyu sordum beri bulduğum en basit yolu bağımlılıklarınıza npm paketi hizmet eklemektir .

yarn add serve veya npm i serve

ve başlangıç ​​komut dosyanızı aşağıdakilerle değiştirin:

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

Bu aslında, oluştur-tepki-uygulama belgelerinin dışında

İşte daha basit bir çözüm. Senin Düşürme react-scriptsTo 3.2.0Gözlerinde farklı package.json(mayın idi3.3.0 ).

package-lock.jsonVe node_modules( rm -rf package-lock.json node_modules) öğelerinizi silmeniz ve ardından bir npm i. Hem yeni hem de Teslim package.jsonve package-lock.jsonrepoya.

Tepki ile uğraştığımdan beri bir süre geçti, ama react-scriptsTepki ile uğraştığımdan yanılmıyorsam web paketinin üzerine inşa edildi, bu yüzden gelişimi hızlandırmak için büyük olasılıkla webpack-dev-server kullanıyor. Diskteki değişiklikleri keşfettiğinde sıcak yeniden yüklemeyi tetiklemek üzere istemciyle iletişim kurmak için websockets kullanır.

Muhtemelen uygulamayı geliştirme modunda başlatıyorsunuz, bu yüzden bir üretim ortamına dağıtıyorsanız npm run build, en sevdiğiniz web sunucunuzla sunabileceğiniz bir dizi javascript dosyası oluşturacak şekilde çalıştırmalısınız .

• Klasörün ve node.js uygulamasının arkasında oluşturun
• Uygulamanızın kökünde hızlı yönlendirici oluşturun
• Bir server.js dosyası oluşturun

Bu kodu server.js içine ekleyin

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 içine

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

Ve rota proxy'sini /folder-name-react-app/pakage.json dosyasına ekleyin

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

Heroku konuşlandırmasıyla ilgili bu sorunla mücadele eden herkes reac-scriptsmodülün sürümüne geçiyor3.2.0 .

1. package-lock.jsondosyayı kaldır
2. node_modulesklasörü kaldır
3. yerine react-scriptsgöre versiyonunu3.2.0
4. npm install tüm modüller tekrar

Bu makaleye Create-React-App web sitesinden bakmanız gerekiyor. Heroku uygulaması oluştururken ihtiyaç duyduğunuz Github'da React uygulaması, mars / create-tepki-uygulama-buildpack için belirli bir buildpack'i işaret eden 'Create-React-App' ile oluşturulan React uygulamasının düzgün bir şekilde nasıl dağıtılacağını açıklar.

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

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

Herkesin burada güvensiz websocket sorunu ile aynı sorunu vardı, bu yüzden Create-React-App makaleden çözümü test ettim. Sorunu çözdü. Düğüm_modülünü veya herhangi bir şeyi değiştirmeye gerek yoktur.

Tek yapmanız gereken React uygulamasının kökündeki CLI'dan heroku uygulaması oluştururken bize bu komutu vermek:

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

sonra:

git push heroku master

Heroku web sitenize gittiğinizde. "güvensiz websocket" hatası olmadan beklendiği gibi çalışacaktır.

(Heroku için zaten oluşturduktan / dağıttıktan SONRA mars / create-tepki-uygulama buildpack'i nasıl ekleyeceğimi bilmiyorum. Bu bölüme henüz ulaşmadım.)

Yukarıdaki çözüm, create-tepki-uygulama ekibinin Heroku'ya konuşlandırmak için sahip olduğu sorunu ele alıyor gibi görünüyor.