Saya mendapatkan pesan "Header Host Tidak Valid", ketika menjalankan aplikasi Bereaksi saya di server dev Webpack di Cloud9.io

Saya menggunakan sebagai lingkungan, sebuah VM Online IDE Cloud9.io ubuntu dan saya telah mengurangi masalah ini dengan hanya menjalankan aplikasi dengan server dev Webpack.

Saya meluncurkannya dengan:

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

$ IP adalah variabel yang memiliki alamat host $ PORT memiliki nomor port.

Saya diperintahkan untuk menggunakan vars ini ketika menggunakan aplikasi di Cloud 9, karena mereka memiliki IP default dan info PORT.

Server mem-boot dan mengkompilasi kode, tidak masalah, itu tidak menunjukkan kepada saya file indeks sekalipun. Hanya layar kosong dengan "Header Host Tidak Valid" sebagai teks.

Ini Permintaannya:

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

Ini adalah package.json saya:

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

Ini adalah 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
  }
}

Server webpack dev mengembalikan ini karena pengaturan host saya. Di webpack-dev-server / lib / Server.js line 60. Dari https://github.com/webpack/webpack-dev-server

Pertanyaan saya adalah bagaimana saya mengatur agar lulus pemeriksaan ini dengan benar. Bantuan apa pun akan sangat dihargai.

Masalahnya terjadi karena webpack-dev-server2.4.4 menambahkan cek host. Anda dapat menonaktifkannya dengan menambahkan ini ke konfigurasi webpack Anda:

 devServer: {
    compress: true,
    disableHostCheck: true,   // That solved it

 }      

EDIT: Harap dicatat, perbaikan ini tidak aman.

Silakan lihat jawaban berikut untuk solusi yang aman: https://stackoverflow.com/a/43621275/5425585

Saya menemukan, bahwa saya perlu mengatur public properti devServer, ke nilai host permintaan saya. Sedang itu akan ditampilkan di alamat eksternal itu.

Jadi saya membutuhkan ini di webpack.config.js saya

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

Solusi lain menggunakannya di CLI:

webpack-dev-server --publik $ C9_HOSTNAME <- var untuk IP eksternal Cloud9

Inilah yang bekerja untuk saya:

Tambahkan diizinkanHost di bawah devServer di webpack.config.js Anda:

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

Saya tidak perlu menggunakan parade --host atau --public.

Tambahkan konfigurasi ini ke file konfigurasi webpack Anda saat menggunakan webpack-dev-server (Anda masih dapat menentukan host sebagai 0.0.0.0).

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

Opsi yang lebih aman adalah dengan menambahkan allowHosts ke konfigurasi Webpack Anda seperti ini:

module.exports = {
devServer: {
 allowedHosts: [
  'host.com',
  'subdomain.host.com',
  'subdomain2.host.com',
  'host2.com'
   ]
  }
};

Array berisi semua host yang diizinkan, Anda juga dapat menentukan subdomian. lihat lebih lanjut di sini

Jika Anda belum mengeluarkan CRA, Anda tidak dapat dengan mudah mengubah konfigurasi paket web Anda. File konfigurasi disembunyikan di node_modules/react_scripts/config/webpackDevServer.config.js. Anda tidak disarankan untuk mengubah konfigurasi itu.

Sebaliknya, Anda hanya dapat mengatur variabel lingkungan DANGEROUSLY_DISABLE_HOST_CHECKuntuk truemenonaktifkan cek host:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command

Daripada mengedit file konfigurasi webpack, cara yang lebih mudah untuk menonaktifkan pemeriksaan host adalah dengan menambahkan .envfile ke folder root Anda dan meletakkan ini:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Sesuai dengan nama variabel, menonaktifkannya tidak aman dan hanya disarankan untuk digunakan hanya di lingkungan dev.

Jika Anda menggunakan create-react-app di C9 jalankan saja perintah ini untuk memulai

npm run start --public $C9_HOSTNAME

Dan akses aplikasi dari apa pun nama host Anda (mis. Ketik $C_HOSTNAMEterminal untuk mendapatkan nama host)

Jika Anda menjalankan webpack-dev-serverdalam wadah dan mengirimkan permintaan kepadanya melalui nama wadahnya, Anda akan mendapatkan kesalahan ini. Untuk mengizinkan permintaan dari wadah lain di jaringan yang sama, cukup berikan nama wadah (atau nama apa pun yang digunakan untuk menyelesaikan wadah) menggunakan --publicopsi. Ini lebih baik daripada menonaktifkan pemeriksaan keamanan sepenuhnya.

Dalam kasus saya, saya berlari webpack-dev-serverdalam sebuah wadah yang diberi nama assetsdocker-compose. Saya mengubah perintah mulai menjadi ini:

webpack-dev-server --mode development --host 0.0.0.0 --public assets

Dan wadah lainnya sekarang dapat membuat permintaan melalui http://assets:5000.