Tiêu đề máy chủ không hợp lệ khi ngrok cố gắng kết nối với máy chủ React dev

191

Tôi đang thử kiểm tra ứng dụng React của mình trên thiết bị di động. Tôi đang sử dụng ngrok để cung cấp máy chủ cục bộ của mình cho các thiết bị khác và ứng dụng này đã hoạt động với nhiều ứng dụng khác. Tuy nhiên, khi tôi cố gắng kết nối ngrok với máy chủ React dev, tôi gặp lỗi:

Invalid Host Header

Tôi tin rằng React chặn tất cả các yêu cầu từ một nguồn khác theo mặc định. Có suy nghĩ gì không?

reactjs localhost ngrok

— Patrick Connors
nguồn

Câu trả lời:

558

Tôi đang gặp một vấn đề tương tự và tìm thấy hai giải pháp hoạt động như xem trực tiếp ứng dụng trong trình duyệt

ngrok http 8080 -host-header="localhost:8080"
ngrok http --host-header=rewrite 8080

rõ ràng thay thế 8080 bằng bất cứ cổng nào bạn đang chạy

giải pháp này vẫn phát sinh lỗi khi tôi sử dụng điều này trong một trang được nhúng, nó sẽ lấy bundle.js từ ứng dụng phản ứng. Tôi nghĩ vì nó viết lại tiêu đề thành localhost, nên khi nó được nhúng, nó sẽ tìm đến localhost, ứng dụng không còn chạy nữa

— văn bản
nguồn

cái đầu tiên là đủ

— Sudhir

Trong trường hợp người khác gặp phải vấn đề này: Điều này hoạt động, nhưng nó dường như làm rối cookie, có nghĩa là nó phá vỡ cơ chế đăng nhập và như vậy!

— pdowling

Vấn đề này cũng xảy ra với Angular 6, và nó hoạt động, cảm ơn

— Druta Ruslan

Các -host-headernên đến trước số cổng, vì vậy ví dụ đầu tiên nênngrok http -host-header="localhost:8080" 8080

— Sean Bean

./ngrok http --host-header = viết lại 8080

— sreejith so với

lựa chọn 1

Nếu bạn không cần sử dụng Xác thực, bạn có thể thêm cấu hình vào các lệnh ngrok

ngrok http 9000 --host-header = viết lại

hoặc là

ngrok http 9000 --host-header = "localhost: 9000"

Nhưng trong trường hợp này, Xác thực sẽ không hoạt động trên trang web của bạn vì ngrok viết lại tiêu đề và phiên không hợp lệ cho tên miền ngrok của bạn

Lựa chọn 2

Nếu bạn đang sử dụng webpack, bạn có thể thêm cấu hình sau

devServer: {
    disableHostCheck: true
}

Trong trường hợp đó, tiêu đề Xác thực sẽ hợp lệ cho miền ngrok của bạn

— Peter Gyschuk
nguồn

Tôi đã sử dụng thiết lập này trong một ứng dụng phản ứng hoạt động. Tôi đã tạo một tệp cấu hình có tên configstrp.js có chứa các mục sau:

module.exports = {
ngrok: {
// use the local frontend port to connect
enabled: process.env.NODE_ENV !== 'production',
port: process.env.PORT || 3000,
subdomain: process.env.NGROK_SUBDOMAIN,
authtoken: process.env.NGROK_AUTHTOKEN
},   }

Yêu cầu tệp trong máy chủ.

const configstrp      = require('./config/configstrp.js');
const ngrok = configstrp.ngrok.enabled ? require('ngrok') : null;

và kết nối như vậy

if (ngrok) {
console.log('If nGronk')
ngrok.connect(
    {
    addr: configstrp.ngrok.port,
    subdomain: configstrp.ngrok.subdomain,
    authtoken: configstrp.ngrok.authtoken,
    host_header:3000
  },
  (err, url) => {
    if (err) {

    } else {

    }
   }
  );
 }

Không vượt qua tên miền phụ nếu bạn không có tên miền tùy chỉnh

— FlyingSnowGhost
nguồn