Câu hỏi Tôi nhận được thông báo "Tiêu đề máy chủ không hợp lệ", khi chạy ứng dụng React của tôi trong máy chủ webpack dev trên Cloud9.io


Tôi đang sử dụng như một môi trường, một IDE trực tuyến Cloud9.io ubuntu VM và tôi đã giảm bằng cách khắc phục sự cố lỗi này để chỉ chạy ứng dụng với máy chủ webpack dev.

Tôi khởi chạy nó với:

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

$ IP là một biến có địa chỉ máy chủ $ PORT có số cổng.

Tôi được hướng dẫn sử dụng các vars này khi triển khai một ứng dụng trong Cloud 9, vì chúng có thông tin IP và PORT mặc định.

Máy chủ khởi động và biên dịch mã, không vấn đề gì, nó là không phải hiển thị cho tôi tệp chỉ mục. Chỉ một màn hình trống có "Tiêu đề máy chủ không hợp lệ" dưới dạng văn bản.

Đây là Yêu cầu:

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

Đây là package.json của tôi:

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

Đây là 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
  }
}

Máy chủ webpack dev đang trả về điều này vì thiết lập máy chủ của tôi. Trong dòng webpack-dev-server / lib / Server.js dòng 60. Từ https://github.com/webpack/webpack-dev-server

Câu hỏi của tôi là làm thế nào để tôi thiết lập để chính xác vượt qua kiểm tra này. Mọi sự trợ giúp sẽ rất được trân trọng.


76
2018-04-25 19:45


gốc


Dường như vấn đề nằm ngoài phạm vi nhận xét. - elmeister
Tôi không hiểu vấn đề đang xảy ra như thế nào. Bạn có thể chỉ cho tôi hướng đi đúng? - Artur Vieira


Các câu trả lời:


Tôi đã giải quyết bằng cách này, beacuse webpack-dev-server 2.4.4 thêm kiểm tra máy chủ

 devServer: {

    compress: true,

    disableHostCheck: true,   // That solved it

 }      

EDIT: Xin lưu ý, sửa chữa này là không an toàn.

Vui lòng xem câu trả lời sau cho một giải pháp an toàn: https://stackoverflow.com/a/43621275/5425585


166
2018-04-27 02:42



Điều này cũng giải quyết cho tôi ... cảm ơn - John
Đây là vấn đề bảo mật. Sử dụng tùy chọn công khai để thay thế cho tên máy chủ được phép. Xem medium.com/webpack/… để biết thêm thông tin. - SystemParadox
tùy chọn công cộng một mình đã không làm việc cho tôi ... disableHostCheck là điều duy nhất giải quyết nó: \ - davidkomer
@davidkomer tương tự cho tôi. Điều duy nhất hoạt động là disableHostCheck ... - irl_irl
cập nhật: stackoverflow.com/a/51463168/83452 làm việc cho tôi - irl_irl


Tôi phát hiện ra rằng tôi cần phải đặt public thuộc tính của devServer, với giá trị máy chủ của yêu cầu của tôi. Là nó sẽ được hiển thị tại địa chỉ bên ngoài đó.

Vì vậy, tôi cần điều này trong webpack.config.js của tôi

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

Một giải pháp khác là sử dụng nó trên CLI:

webpack-dev-server - công khai $ C9_HOSTNAME <- var cho IP bên ngoài Cloud9


50
2018-04-25 21:26



Đã gặp phải điều này ngày hôm nay! Cảm ơn đã đăng bài viết! - JohnnyQ
Cũng chỉ cần chạy vào ngày hôm nay. Nó có vẻ như webpack-dev-server gần đây đã thực hiện thay đổi này yêu cầu tiêu đề máy chủ chính xác. Xem github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 để biết thêm thông tin. - Kaitrono
Thay đổi này cũng ảnh hưởng đến webpack-dev-server 1.16.4. Bạn có thể đọc thêm về nó ở đây: medium.com/webpack/…. - Tyler Collier
Điều này làm việc cho tôi khi tôi chạy vào Invalid Host header lỗi trong một dự án clue vue. - Timmy Von Heiss


Thêm cấu hình này vào tệp cấu hình webpack của bạn khi sử dụng webpack-dev-server (bạn vẫn có thể chỉ định máy chủ lưu trữ là 0.0.0.0).

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

3
2018-03-30 11:39



Điều này cũng làm việc cho cấu hình vue-cli Vue.js mới: github.com/vuejs/vue-cli/blob/dev/docs/config.md - CenterOrbit


Nếu bạn đang sử dụng ứng dụng tạo phản ứng trên C9, chỉ cần chạy lệnh này để bắt đầu

npm run start --public $C9_HOSTNAME

Và truy cập ứng dụng từ bất kỳ tên máy chủ nào của bạn (ví dụ: nhập $C_HOSTNAME trong thiết bị đầu cuối để lấy tên máy chủ)


0
2018-01-09 14:19





Đây là những gì làm việc cho tôi:

Thêm allowHosts trong devServer trong webpack.config.js của bạn:

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

Tôi không cần sử dụng các tham số --host hoặc - public.


0
2017-07-22 08:06





Chỉnh sửa node_modules/webpack-dev-server/lib/Server.js dòng 425 cập nhật dòng như

return true;

-2
2017-10-31 08:03