ฉันได้รับข้อความ“ 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.