Недійсний заголовок хоста, коли ngrok намагається підключитися до сервера React dev

191

Я намагаюся перевірити свою програму React на мобільному пристрої. Я використовую ngrok, щоб зробити свій локальний сервер доступним для інших пристроїв, і я став цим працювати з багатьма іншими програмами. Однак, коли я намагаюся підключити ngrok до сервера React dev, я отримую помилку:

Invalid Host Header

Я вважаю, що React за замовчуванням блокує всі запити з іншого джерела. Будь-які думки?

reactjs localhost ngrok

— Патрік Коннорс
джерело

Відповіді:

558

Я зіткнувся з подібною проблемою і знайшов два рішення, які працюють на перегляд програми безпосередньо у браузері

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

очевидно, замініть 8080 будь-яким портом, на якому ви працюєте

це рішення все ще викликає помилку, коли я використовую це на вбудованій сторінці, яка витягує bundle.js з реагуючого додатка. Я думаю, оскільки він переписує заголовок до localhost, коли це вбудовано, він шукає localhost, на якому додаток більше не працює.

— текстуальний
джерело

першого вистачило

— Судхір

У випадку, якщо хтось інший зіткнеться з цією проблемою: Це працює, але це, здається, псує файли cookie, тобто означає, що він порушує механізми входу і таке інше!

— забиття

Ця проблема була і для Angular 6, і вона працює, дякую

— Друта Руслан

Це -host-headerмає бути перед номером порту, тому перший приклад повинен бутиngrok http -host-header="localhost:8080" 8080

— Шон Бін

./ngrok http --host-header = переписати 8080

— sreejith vs

Варіант 1

Якщо вам не потрібно використовувати автентифікацію, ви можете додати конфігурації до команд ngrok

ngrok http 9000 --host-header = переписати

або

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

Але в цьому випадку автентифікація не працюватиме на вашому веб-сайті, оскільки заголовки та сеанси переписування ngrok не відповідають вашому домену ngrok

Варіант 2

Якщо ви використовуєте веб-пакет, ви можете додати наступну конфігурацію

devServer: {
    disableHostCheck: true
}

У цьому випадку заголовок аутентифікації буде дійсним для вашого домену ngrok

— Петро Гіщук
джерело

Я використав цю програму в реагуючому додатку, який працює. Я створив файл налаштування з назвою configstrp.js, який містить наступне:

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
},   }

Потрібен файл на сервері.

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

і підключити як таке

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 {

    }
   }
  );
 }

Не передайте субдомен, якщо у вас немає спеціального домену

— FlyingSnowGhost
джерело