सवाल क्लाउड 9.io पर वेबपैक देव सर्वर में मेरा रिएक्ट ऐप चलाते समय मुझे "अमान्य होस्ट हेडर" संदेश मिल रहा है


मैं एक पर्यावरण के रूप में उपयोग कर रहा हूं, क्लाउड 9.ओ यूबंटू वीएम ऑनलाइन आईडीई और मैंने वेबपैक देव सर्वर के साथ ऐप चलाने के लिए इस त्रुटि की समस्या निवारण से कम कर दिया है।

मैं इसे लॉन्च करता हूं:

webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT

$ आईपी एक चर है जिसमें होस्ट पता है $ पोर्ट में पोर्ट नंबर है।

क्लाउड 9 में ऐप को तैनात करते समय मुझे इन वर्रों का उपयोग करने का निर्देश दिया गया है, क्योंकि उनके पास डिफ़ॉल्ट आईपी और पोर्ट जानकारी है।

सर्वर बूट करता है और कोड संकलित करता है, कोई समस्या नहीं, यह है नहीं हालांकि मुझे इंडेक्स फ़ाइल दिखा रहा है। टेक्स्ट के रूप में "अमान्य होस्ट हेडर" के साथ केवल एक खाली स्क्रीन।

यह अनुरोध है:

GET / HTTP/1.1
Host: store-client-nestroia1.c9users.io
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

यह मेरा पैकेज है। जेसन:

{
  "name": "workspace",
  "version": "0.0.0",
  "scripts": {
    "dev": "webpack -d --watch",
    "server": "webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT",
    "build": "webpack --config webpack.config.js"
  },
  "author": "Artur Vieira",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "file-loader": "^0.11.1",
    "node-fetch": "^1.6.3",
    "react": "^15.5.4",
    "react-bootstrap": "^0.30.9",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4",
    "whatwg-fetch": "^2.0.3"
  }
}

यह webpack.config.js है:

const path = require('path');

module.exports = {

  entry: ['whatwg-fetch', "./app/_app.jsx"], // string | object | array
  // Here the application starts executing
  // and webpack starts bundling
  output: {
    // options related to how webpack emits results

    path: path.resolve(__dirname, "./public"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)

    filename: "bundle.js", // string
    // the filename template for entry chunks

    publicPath: "/public/", // string
    // the url to the output directory resolved relative to the HTML page
  },

  module: {
    // configuration regarding modules

    rules: [
      // rules for modules (configure loaders, parser options, etc.)
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "./app")
        ],
        exclude: [
          path.resolve(__dirname, "./node_modules")
        ],
        loader: "babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0",
        // the loader which should be applied, it'll be resolved relative to the context
        // -loader suffix is no longer optional in webpack2 for clarity reasons
        // see webpack 1 upgrade guide
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },

  devServer: {
    compress: true
  }
}

वेबपैक देव सर्वर मेरे होस्ट सेटअप के कारण इसे वापस कर रहा है। वेबपैक-डीवी-सर्वर / lib / server.js लाइन 60 में। से https://github.com/webpack/webpack-dev-server

मेरा सवाल यह है कि मैं इस चेक को सही तरीके से पास करने के लिए कैसे सेटअप करूं। किसी भी तरह की सहायता का स्वागत किया जाएगा।


76
2018-04-25 19:45


मूल


लगता है कि समस्या टिप्पणी दायरे से बाहर है। - elmeister
मुझे समझ में नहीं आता कि समस्या कैसे हो रही है। क्या आप मुझे सही दिशा में निर्देशित कर सकते हैं? - Artur Vieira


जवाब:


मैंने इसके साथ हल किया, वेबकैक-dev-server 2.4.4 होस्ट होस्ट चेक करें

 devServer: {

    compress: true,

    disableHostCheck: true,   // That solved it

 }      

संपादित करें: कृपया ध्यान दें, यह फिक्स असुरक्षित है।

एक सुरक्षित समाधान के लिए कृपया निम्नलिखित उत्तर देखें: https://stackoverflow.com/a/43621275/5425585


166
2018-04-27 02:42



यह भी मेरे लिए हल हो गया ... धन्यवाद - John
यह एक सुरक्षा मुद्दा है। अनुमति होस्टनाम निर्दिष्ट करने के बजाय सार्वजनिक विकल्प का उपयोग करें। देख medium.com/webpack/... अधिक जानकारी के लिए। - SystemParadox
अकेले सार्वजनिक विकल्प मेरे लिए काम नहीं किया ... अक्षम होस्ट चेक एकमात्र चीज है जिसने इसे हल किया: \ - davidkomer
@davidkomer मेरे लिए एक ही है। काम करने वाली एकमात्र चीज़ अक्षम हैस्ट चेक ... - irl_irl
अद्यतन करें: stackoverflow.com/a/51463168/83452 मेरे लिये कार्य करता है - irl_irl


मुझे पता चला कि मुझे सेट करने की जरूरत है public मेरे अनुरोध के होस्ट मूल्य पर, देवसेवर की संपत्ति। ऐसा होने पर यह उस बाहरी पते पर प्रदर्शित किया जाएगा।

तो मुझे इसे अपने webpack.config.js में चाहिए था

devServer: {
  compress: true,
  public: 'store-client-nestroia1.c9users.io' // That solved it
}

एक और समाधान सीएलआई पर इसका उपयोग कर रहा है:

वेबपैक-देव-सर्वर - सार्वजनिक $ C9_HOSTNAME <- क्लाउड 9 बाहरी आईपी के लिए var


50
2018-04-25 21:26



आज भी इसे जन्म दिया! प्रविष्टि के लिए धन्यवाद! - JohnnyQ
इसके अलावा आज भी इसमें भाग गया। ऐसा लग रहा है webpack-dev-server हाल ही में इस बदलाव को सही होस्ट हेडर की आवश्यकता है। देख github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 अधिक जानकारी के लिए। - Kaitrono
परिवर्तन वेबपैक-देव-सर्वर 1.16.4 को भी प्रभावित करता है। आप इसके बारे में यहां और अधिक पढ़ सकते हैं: medium.com/webpack/...। - Tyler Collier
यह मेरे लिए भी काम करता था जब मैं भाग गया Invalid Host header एक vue क्ली परियोजना में त्रुटि। - Timmy Von Heiss


वेबपैक-देव-सर्वर का उपयोग करते समय इस कॉन्फ़िगर को अपनी वेबपैक कॉन्फ़िगरेशन फ़ाइल में जोड़ें (आप अभी भी होस्ट को 0.0.0.0 के रूप में निर्दिष्ट कर सकते हैं)।

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}

3
2018-03-30 11:39



यह नए Vue.js vue-cli कॉन्फ़िगरेशन के लिए भी काम करता है: github.com/vuejs/vue-cli/blob/dev/docs/config.md - CenterOrbit


यदि आप C9 पर create-react-app का उपयोग कर रहे हैं तो बस इस कमांड को शुरू करने के लिए चलाएं

npm run start --public $C9_HOSTNAME

और ऐप तक पहुंचें जो भी आपका होस्टनाम है (उदाहरण के लिए टाइप करें $C_HOSTNAME टर्मिनल में होस्टनाम प्राप्त करने के लिए)


0
2018-01-09 14:19





इसी से मेरा काम बना है:

अपने वेबपैक.config.js में devServer के तहत अनुमति जोड़ें:

devServer: {
  compress: true,
  inline: true,
  port: '8080',
  allowedHosts: [
      '.amazonaws.com'
  ]
},

मुझे - होस्ट या - सार्वजनिक पैराम्स का उपयोग करने की आवश्यकता नहीं थी।


0
2017-07-22 08:06





संपादित करें node_modules/webpack-dev-server/lib/Server.js लाइन 425 के रूप में लाइन अद्यतन करें

return true;

-2
2017-10-31 08:03