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

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

webpack-dev-server2.4.4는 호스트 확인을 추가 하기 때문에 문제가 발생합니다 . 이것을 webpack 설정에 추가하여 비활성화 할 수 있습니다 :

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

 }      

편집 :이 수정 프로그램은 안전하지 않습니다.

보안 솔루션에 대한 다음 답변을 참조하십시오 : https : //.com/a/43621275/5425585

publicdevServer 의 속성을 요청의 호스트 값 으로 설정해야한다는 것을 알았습니다 . 그 외부 주소에 표시됩니다.

그래서 webpack.config.js에서 이것을 필요로했습니다.

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

다른 솔루션은 CLI에서 사용하고 있습니다.

webpack-dev-server --public $ C9_HOSTNAME <-Cloud9 외부 IP의 경우 var

이것이 나를 위해 일한 것입니다.

webpack.config.js의 devServer 아래에 allowedHosts를 추가하십시오.

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

--host 또는 --public 매개 변수를 사용할 필요가 없었습니다.

webpack-dev-server를 사용할 때이 설정을 webpack 설정 파일에 추가하십시오 (여전히 호스트를 0.0.0.0으로 지정할 수 있습니다).

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

보다 안전한 옵션은 다음과 같이 allowedHosts를 Webpack 설정에 추가하는 것입니다.

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

배열에 허용 된 모든 호스트가 포함되어 있으며, 서브 도메인을 지정할 수도 있습니다. 여기서 더 확인하십시오

CRA에서 아직 추출하지 않은 경우 웹팩 구성을 쉽게 수정할 수 없습니다. 구성 파일은에 숨겨져 있습니다 node_modules/react_scripts/config/webpackDevServer.config.js. 해당 구성을 변경하지 않는 것이 좋습니다.

대신, 당신은 단지 환경 변수를 설정할 수 있습니다 DANGEROUSLY_DISABLE_HOST_CHECK할 true호스트 확인을 사용하지 :

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command

webpack 설정 파일을 편집하는 대신 호스트 확인을 비활성화하는 가장 쉬운 방법은 .env파일을 루트 폴더 에 추가 하고 다음을 입력하는 것입니다.

DANGEROUSLY_DISABLE_HOST_CHECK=true

변수 이름에서 알 수 있듯이 비활성화하면 안전하지 않으며 개발 환경에서만 사용하는 것이 좋습니다 .

C9에서 create-react-app를 사용하는 경우이 명령을 실행하여 시작하십시오.

npm run start --public $C9_HOSTNAME

호스트 이름이 무엇이든 앱에 액세스합니다 (예 : $C_HOSTNAME호스트 이름을 얻기 위해 터미널에 입력 ).

webpack-dev-server컨테이너에서 실행 중이고 컨테이너 이름을 통해 요청을 보내는 경우이 오류가 발생합니다. 동일한 네트워크에서 다른 컨테이너의 요청을 허용하려면 옵션을 사용하여 컨테이너 이름 (또는 컨테이너를 해결하는 데 사용되는 이름)을 제공하십시오 --public. 이것은 보안 검사를 완전히 비활성화하는 것보다 낫습니다.

제 경우 에는 docker-compose webpack-dev-server라는 이름의 컨테이너에서 실행 중 이었습니다 assets. 시작 명령을 다음과 같이 변경했습니다.

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

그리고 다른 컨테이너는 이제를 통해 요청을 할 수있었습니다 http://assets:5000.