ฉันได้รับข้อความ“ Invalid Host header” เมื่อเรียกใช้แอป React ใน Webpack dev server บน Cloud9.io


176

ฉันใช้เป็นสภาพแวดล้อม Cloud9.io อูบุนตู VM Online IDE และฉันได้ลดลงโดยการแก้ไขปัญหาข้อผิดพลาดนี้เพียงแค่เรียกใช้แอปกับเซิร์ฟเวอร์ Webpack dev

ฉันเปิดตัวด้วย:

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

$ IP เป็นตัวแปรที่มีที่อยู่โฮสต์ $ PORT มีหมายเลขพอร์ต

ฉันได้รับคำสั่งให้ใช้ vars เหล่านี้เมื่อปรับใช้แอพใน Cloud 9 เนื่องจากมีข้อมูล IP และ PORT เริ่มต้น

เซิร์ฟเวอร์บูทและคอมไพล์รหัสไม่มีปัญหาไม่ใช่แสดงไฟล์ดัชนีให้ฉันเลย หน้าจอว่างเปล่าที่มีข้อความ "Invalid Host header" เป็นข้อความ

นี่คือคำขอ:

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

คำถามของฉันคือฉันจะตั้งค่าอย่างไรให้ผ่านการตรวจสอบนี้อย่างถูกต้อง ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก.


ดูเหมือนว่าปัญหาจะอยู่นอกขอบเขตความคิดเห็น
elmeister

ฉันไม่เข้าใจว่าปัญหาเกิดขึ้นได้อย่างไร คุณช่วยชี้ฉันในทิศทางที่ถูกต้องได้ไหม?
Artur Vieira

ในกรณีของฉันคำตอบยอดเยี่ยมก็ใช้ได้
MrMesees

คำตอบ:


311

ปัญหาเกิดขึ้นเนื่องจากwebpack-dev-server2.4.4 เพิ่มการตรวจสอบโฮสต์ คุณสามารถปิดการใช้งานได้โดยเพิ่มสิ่งนี้ลงในการกำหนดค่า webpack ของคุณ:

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

 }      

แก้ไข: โปรดทราบว่าการแก้ไขนี้ไม่ปลอดภัย

โปรดดูคำตอบต่อไปนี้สำหรับโซลูชันที่ปลอดภัย: https://stackoverflow.com/a/43621275/5425585


13
นี่เป็นปัญหาด้านความปลอดภัย ใช้ตัวเลือกสาธารณะแทนเพื่อระบุชื่อโฮสต์ที่อนุญาต ดูmedium.com/webpack/…สำหรับข้อมูลเพิ่มเติม
SystemParadox

5
ตัวเลือกสาธารณะเพียงอย่างเดียวไม่ได้ผลสำหรับฉัน ... disableHostCheck เป็นสิ่งเดียวที่แก้ไขได้: \
davidkomer

@davidkomer เหมือนกันสำหรับฉัน สิ่งเดียวที่ใช้งานได้คือ disableHostCheck ...
irl_irl

6
มันเป็นปัญหาด้านความปลอดภัยหากคุณใช้เซิร์ฟเวอร์ webpack dev เพื่อสิ่งอื่นใดนอกจาก dev ในระบบ
AlienWebguy

สิ่งนี้ใช้ได้สำหรับฉันเช่นกัน กรณีของฉันคือฉันกำลังใช้การติดตั้ง Bitnami Multisite Worpdress ที่ให้บริการใน 192.168.0.106.xip.io สิ่งที่แปลกคือฉันสามารถทำงานกับ Apache Linux ที่ติดตั้งเดิมโดยไม่ต้อง "แก้ไข" นี้ได้ดี ฉันไม่ได้เปลี่ยนไปใช้แพคเกจ Bitnami ที่ปัญหานี้โผล่ขึ้นมา
Hybrid web dev

103

ฉันพบว่าฉันต้องตั้งค่า publicคุณสมบัติของ devServer เป็นค่าโฮสต์ของคำขอของฉัน เนื่องจากว่ามันจะถูกแสดงที่ที่อยู่ภายนอกนั้น

ดังนั้นฉันต้องการสิ่งนี้ใน webpack.config.js

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

อีกวิธีใช้ใน CLI:

webpack-dev-server - สาธารณะ $ C9_HOSTNAME <- var สำหรับ IP ภายนอก Cloud9


1
พบกันในวันนี้เช่นกัน! ขอบคุณสำหรับการโพสต์!
JohnnyQ

5
เพียงแค่วิ่งเข้าไปในนี้วันนี้ ดูเหมือนว่าwebpack-dev-serverเพิ่งทำการเปลี่ยนแปลงนี้ต้องใช้ส่วนหัวของโฮสต์ที่ถูกต้อง ดูgithub.com/webpack/webpack-dev-server/releases/tag/v2.4.3สำหรับข้อมูลเพิ่มเติม
Kaitrono

2
การเปลี่ยนแปลงมีผลต่อ webpack-dev-server 1.16.4 เช่นกัน คุณสามารถอ่านเพิ่มเติมได้ที่นี่: medium.com/webpack/… .
Tyler Collier

1
สิ่งนี้ใช้ได้สำหรับฉันเช่นกันเมื่อฉันพบInvalid Host headerข้อผิดพลาดในโครงการ vue cli
Timmy Von Heiss

43

นี่คือสิ่งที่ได้ผลสำหรับฉัน:

เพิ่ม allowHosts ภายใต้ devServer ใน webpack.config.js ของคุณ:

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

ฉันไม่จำเป็นต้องใช้ --host หรือ --public params


หากคุณมี HotModuleReload ดูเหมือนว่าpublicพารามิเตอร์เป็นสิ่งที่กำหนด URL ที่ใช้เป็นเป้าหมายสำหรับสิ่งนั้น (หากไม่สามารถคาดเดาได้จากวิธีการแสดงหน้าเว็บซึ่งสำหรับฉันมันไม่สามารถทำได้)
Tom Saleeba

15

เพิ่มการกำหนดค่านี้ลงในไฟล์กำหนดค่า webpack ของคุณเมื่อใช้ webpack-dev-server (คุณยังสามารถระบุโฮสต์เป็น 0.0.0.0)

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

2
นอกจากนี้ยังใช้งานได้กับ Vue.js vue-cli config ใหม่: github.com/vuejs/vue-cli/blob/dev/docs/config.md
CenterOrbit

10

ตัวเลือกที่ปลอดภัยมากขึ้นคือการเพิ่ม allowHosts ลงในการกำหนดค่า Webpack ของคุณดังนี้:

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

อาร์เรย์มีโฮสต์ที่อนุญาตทั้งหมดคุณยังสามารถระบุ subdomians ตรวจสอบเพิ่มเติมได้ที่นี่


5

หากคุณยังไม่ได้ออกจาก CRA คุณจะไม่สามารถแก้ไขการกำหนดค่า webpack ของคุณได้อย่างง่ายดาย 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

1
ขอบคุณ Lukas Kalbertodt คำตอบที่ดีที่สุด ฉันใช้: ส่งออก DANGEROUSLY_DISABLE_HOST_CHECK = จริง เริ่มต้น npm
Mark Kahn

3

แทนที่จะแก้ไขไฟล์กำหนดค่า webpack วิธีที่ง่ายที่สุดในการปิดการใช้งานการตรวจสอบโฮสต์คือการเพิ่ม.envไฟล์ไปยังโฟลเดอร์รูทของคุณและวางสิ่งนี้:

DANGEROUSLY_DISABLE_HOST_CHECK=true

เมื่อชื่อตัวแปรบ่งบอกถึงการปิดใช้งานมันไม่ปลอดภัยและแนะนำให้ใช้เฉพาะในสภาพแวดล้อม dev เท่านั้น


2

หากคุณใช้ create-react-app บน C9 เพียงแค่รันคำสั่งนี้เพื่อเริ่มต้น

npm run start --public $C9_HOSTNAME

และเข้าถึงแอพได้จากชื่อโฮสต์ของคุณ (เช่นพิมพ์$C_HOSTNAMEเทอร์มินัลเพื่อรับชื่อโฮสต์)


0

หากคุณกำลังใช้งานwebpack-dev-serverในคอนเทนเนอร์และส่งคำขอไปยังชื่อคอนเทนเนอร์นั้นคุณจะได้รับข้อผิดพลาดนี้ หากต้องการอนุญาตคำขอจากคอนเทนเนอร์อื่นในเครือข่ายเดียวกันให้ระบุชื่อคอนเทนเนอร์ (หรือชื่อใดก็ตามที่ใช้เพื่อแก้ไขคอนเทนเนอร์) โดยใช้--publicตัวเลือก นี่เป็นการดีกว่าปิดการใช้งานการตรวจสอบความปลอดภัยทั้งหมด

ในกรณีของฉันฉันกำลังทำงานwebpack-dev-serverในคอนเทนเนอร์ที่มีชื่อassetsนักเทียบท่าเขียน ฉันเปลี่ยนคำสั่งเริ่มต้นเป็นสิ่งนี้:

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

และภาชนะอื่น ๆ http://assets:5000คือตอนนี้สามารถที่จะทำให้การร้องขอผ่านทาง

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.