प्रतिक्रिया एप्लिकेशन त्रुटि: 'WebSocket' का निर्माण करने में विफल: HTTPS पर लोड किए गए पृष्ठ से असुरक्षित WebSocket कनेक्शन शुरू नहीं किया जा सकता है

Question

मैं एक रिएक्ट एप्लिकेशन को तैनात कर रहा हूं, लेकिन जब मैं https पर पेज पर जाता हूं तो मुझे एक अजीब त्रुटि हो रही है।

जब मैं https पर पेज पर जाता हूं तो मुझे निम्नलिखित त्रुटि मिलती है:

SecurityError: 'WebSocket' बनाने में विफल: HTTPS पर लोड किए गए पेज से असुरक्षित WebSocket कनेक्शन शुरू नहीं किया जा सकता है।

लेकिन जब मैं http पर पेज पर जाता हूं तो यह पूरी तरह से काम करता है।

समस्या यह है कि मैं वेबस्केट का उपयोग नहीं कर रहा हूँ जहाँ तक मैं बता सकता हूँ। मैंने यह देखने के लिए कोड के माध्यम से खोजा कि क्या 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"
    ]
  }
}

Answer 1

पैच के लिए अभिक्रिया-स्क्रिप्ट की प्रतीक्षा कर रहे लोगों के लिए:

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

आशा है कि यह उत्तर आपको त्रुटि से छुटकारा पाने में मदद करेगा।

अधिक जानकारी के लिए यहां देखें `

Comments

मैं एक ही मुद्दा है, तो मैं सिर्फ नोड मॉड्यूल के अंदर इस फ़ाइल को संपादित करने के लिए है?

— 19

@Versifiction हाँ। यह तब तक किया जाना चाहिए जब तक कि एक नया रिएक्शन-सॉर्ट पैच जारी न हो जाए।

— प्रताप शर्मा

शायद node_modulesइन्हें मैन्युअल रूप से संशोधित नहीं किया जाना चाहिए क्योंकि ये साझा रेपो

— oliversisson

तो मैं एक ही मुद्दा रहा हूँ और मैं अपने app heroku करने के लिए तैनात कर रहा हूँ। मैंने ज़बरदस्ती सिर्फ वेबसोकेट फ़ाइल बनाई और उसे हेरोकू में तैनात कर दिया, लेकिन मुझे अभी भी वही त्रुटि मिली है, किसी को भी इसके आसपास कोई काम है? केवल एक चीज जिसे मैंने आज़माया नहीं है वह पूरे नोड_मॉड्यूल निर्देशिका को कमिट कर रही है।

— टायलर स्ट्रॉन्थ

@TylerStrouth वहाँ एक संभावना है कि आप Heroku में नोड मॉड्यूल संपादित कर सकते हैं ?? एक बार जब आप उसे हॉकू में तैनात करते हैं तो वह पैकेज.जॉन में वर्णित पैकेजों को स्थापित करता है। इस तरह आप उपरोक्त फ़ाइल में किए गए परिवर्तन भी ओवरराइड हो जाते हैं। Heroku में नोड मॉड्यूल के अंदर फ़ाइल को संपादित करने का प्रयास करें।

— प्रताप शर्मा

Answer 2

जवाब का एक बहुत यहाँ वास्तव में इस मुद्दे लेकिन सबसे आसान तरीका है के बाद से मैंने पूछा कि इस सवाल का NPM पैकेज को जोड़ने के लिए है मैं पाया है का समाधान करते हैं की सेवा अपने निर्भरता के लिए।

yarn add serve या npm i serve

और फिर अपनी आरंभ स्क्रिप्ट को निम्न के साथ बदलें:

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

यह वास्तव में create-react-app डॉक्स से सीधे बाहर है

Comments

इसका उत्तर होना चाहिए था

— दिनेश शेखावत

यह मेरे लिए काम नहीं करता है जब मैं अपने सर्वर को स्थानीय रूप से लॉन्च करता हूं तो मुझे 404 त्रुटि मिलती है

— ह्यूगो

देर से प्रतिक्रिया के लिए क्षमा करें, आपको स्थानीय विकास के लिए एक और स्क्रिप्ट बनाने की आवश्यकता होगी। उदाहरण के लिए। "dev": "react scripts start" आप npm run devस्थानीय स्तर पर चलाने के लिए दौड़ेंगे।

— लियो पोलिसैस्त्रो

Answer 3

यहाँ एक सरल उपाय है। अपने डाउनग्रेड 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रेपो दोनों के लिए प्रतिबद्ध करें ।

Comments

मेरे लिए काम किया। प्रारंभ में यह 3.3.0 पर निर्भर रहा क्योंकि मैं सहज रूप से npm स्थापित होने के बाद सुझाए गए ऑडिट फिक्स को चला रहा था।

— मार्संडबैक

Answer 4

जब से मैं प्रतिक्रिया के साथ खिलवाड़ कर रहा था, तब से यह एक समय है, लेकिन react-scripts अगर मैं गलत नहीं हूं, तो वेबपैक के शीर्ष पर बनाया गया है, इसलिए यह सबसे तेजी से विकास को गति देने के लिए वेबपैक-देव-सर्वर का उपयोग करता है। डिस्क पर परिवर्तन का पता चलने पर क्लाइंट को गर्म पुनः लोड करने के लिए संचार करने के लिए यह वेबसोकेट का उपयोग करता है।

आप शायद केवल विकास मोड में एप्लिकेशन शुरू कर रहे हैं, इसलिए यदि आप इसे उत्पादन वातावरण में तैनात कर रहे हैं, तो आपको चलाना चाहिए npm run buildजो जावास्क्रिप्ट फ़ाइलों का एक सेट तैयार करेगा जिसे आप अपने पसंदीदा वेबसर्वर के साथ सेवा कर सकते हैं।

Comments

यह सही लगता है, धन्यवाद! मैं कोशिश करूंगा कि आपको पता चल जाए कि यह काम करता है।

— सिंह पोलीकास्ट्रो

मुझे ठीक वैसी ही समस्या हो रही है, मैंने इसे GHHHub पेजों पर तैनात करने के लिए npm रन बिल्ड चलाया है, लेकिन यह काम नहीं किया, इसलिए कोशिश की गई Heroku मुझे उपर्युक्त त्रुटि मिलती है, अगर मैं असुरक्षित लोड करने का विकल्प बनाता हूं तो यह HTTP पर काम करता है स्क्रिप्ट। इसे सुरक्षित बनाने और इस त्रुटि को हल करने के लिए समाधान उपयोगी होगा!

— गणेश

@ गलशाह, तो आप गलत कर रहे हैं। आपको निर्देशिका npm run buildमें केवल सामग्री करने और अपलोड करने की आवश्यकता है build।

— जिमी स्टेनके

यह प्रतिक्रिया स्क्रिप्ट 3.3.0 संस्करण के साथ एक समस्या है। आप यहां विस्तृत दस्तावेज " github.com/facebook/create-react-app/pull/8079 " पा सकते हैं । मैंने स्क्रिप्ट्स पर डाउनग्रेड किया - 3.2.0 और मुझे अब कोई त्रुटि नहीं मिल रही है

— गणेश

@monsterpiece, अजीब। जब मैंने परीक्षण किया, तो यह परिणाम नहीं था, हालांकि मैंने हरोकू पर परीक्षण नहीं किया था, लेकिन स्थानीय स्तर पर। यह हो सकता है कि env एक समस्या है, इसलिए इसका स्पष्ट रूप से उल्लेख करना हमेशा संभव होगा। NODE_ENV=production npm run build, और उसके बाद buildहीरोकू (यानी, वेबसर्वर पर आपका वेबरूट होगा, एसआरआर का उपयोग करने तक सर्वर पर नोड की कोई आवश्यकता नहीं होगी) को केवल निर्देशिका अपलोड करें । प्रोडक्शन बिल्ड में वेबपैक देव सर्वर भी शामिल नहीं होना चाहिए , मैं कहूंगा कि उस मामले में एक बग है।

— जिमी स्टेनके

Answer 5

• फोल्डर और नोड.जेएस ऐप के पीछे बनाएं
• अपने ऐप के रूट में एक्सप्रेस राउटर बनाएं
• एक 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}...`)
})

पकोड़े.जसन में

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

और /folder-name-react-app/pakage.json में मार्ग प्रॉक्सी जोड़ें

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

Answer 6

कोई भी जो इस समस्या से जूझ रहा है, उसकी तैनाती पर आप अपने reac-scriptsमॉड्यूल को अपग्रेड करते हैं 3.2.0।

1. हटाना package-lock.jsonफ़ाइल को
2. हटाना node_modulesफ़ोल्डर
3. को react-scriptsसंस्करण बदलें3.2.0
4. npm install सभी मॉड्यूल फिर से

Answer 7

आपको इस लेख को Create-React-App वेबसाइट से देखना होगा। यह समझाता है कि 'क्रिएट-रिएक्ट-ऐप' के साथ बनाए गए रिएक्ट ऐप को ठीक से कैसे तैनात किया जाए, जो कि गितुब में रिएक्ट ऐप, मार्स / क्रिएट-रिएक्शन-ऐप-बिल्डपैक के लिए विशिष्ट बिल्डपैक की ओर इशारा करता है, जिसे आपको हेरोकू ऐप बनाते समय ज़रूरत थी।

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

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

मुझे असुरक्षित वेबसैट इश्यू के साथ भी यही समस्या थी कि हर कोई यहाँ आ रहा है, इसलिए मैंने क्रिएट-रिएक्ट-ऐप लेख से समाधान का परीक्षण किया। इसने समस्या को हल कर दिया। नोड_मॉड्यूल या कुछ भी संशोधित करने की आवश्यकता नहीं है।

रिएक्ट ऐप के मूल में CLI से हरोकू ऐप बनाते समय आपको बस इतना ही करना है:

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

फिर:

git push heroku master

जब आप हरोकू में अपनी वेबसाइट पर जाते हैं। यह बिना किसी "असुरक्षित वेबस्केट" त्रुटि के बिना अपेक्षित रूप से चलेगा।

(मुझे नहीं पता कि आप पहले से ही हरकोको को कैसे बना / तैनात कर सकते हैं?

उपरोक्त समाधान इस मुद्दे को संबोधित करता हुआ प्रतीत होता है कि क्रिएक्ट-रिएक्शन-ऐप की टीम के पास हरोकू को तैनात करने के लिए है।

Comments

बिल्डकाउट को जोड़ने के लिए इसे हरोकू में तैनात किया गया था, हरोकू ऐप पेज पर जाएं-> 'सेटिंग' टैब -> 'बिल्डपैक' सेक्शन। आप mers / create-react-app जोड़ें इसके बाद create Add Buildpack ’बटन पर क्लिक करें।

— जॉन टॉवरी