[reactjs] Cloud9.io의 Webpack dev 서버에서 React 앱을 실행할 때“잘못된 호스트 헤더”메시지가 나타납니다.

Cloud9.io ubuntu VM Online IDE 환경으로 사용하고 있으며 Webpack dev 서버로 앱을 실행하기 위해이 오류를 해결하여 줄였습니다.

나는 그것을 시작한다 :

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

$ IP는 호스트 주소가 $ PORT 인 포트 변수입니다.

Cloud 9에서 앱을 배포 할 때 기본 IP 및 PORT 정보가 있으므로 이러한 변수를 사용하도록 지시 받았습니다.

서버가 부팅되고 코드를 컴파일하는데 아무런 문제가 없지만 인덱스 파일이 표시 되지 않습니다 . 텍스트가 “잘못된 호스트 헤더”인 빈 화면 만.

이것은 요청입니다.

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

이것은 내 package.json입니다.

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

호스트 설정으로 인해 Webpack dev 서버가 이것을 반환하고 있습니다. webpack-dev-server / lib / Server.js 라인 60에서. https://github.com/webpack/webpack-dev-server

내 질문은이 검사를 올바르게 통과하도록 설정하는 방법입니다. 도움을 주시면 감사하겠습니다.

답변

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

 }      

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

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

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

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

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start
# or the equivalent npm command

DANGEROUSLY_DISABLE_HOST_CHECK=true