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

191

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

Invalid Host Header

Я считаю, что React блокирует все запросы из другого источника по умолчанию. Есть предположения?

reactjs localhost ngrok

— Патрик Коннорс
источник

Ответы:

559

Я столкнулся с похожей проблемой и нашел два решения, которые работают, если смотреть приложение прямо в браузере.

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

очевидно, замените 8080 на любой порт, на котором вы работаете

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

— текстовый
источник

первого было достаточно

— Судхир

В случае, если кто-то столкнется с этой проблемой: это работает, но, похоже, испортило куки, то есть нарушает механизмы входа и тому подобное!

— pdowling

Эта проблема была также для Angular 6, и она работает, спасибо

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

Он -host-headerдолжен стоять перед номером порта, поэтому первый пример должен бытьngrok http -host-header="localhost:8080" 8080

— Шон Боб

./ngrok http --host-header = rewrite 8080

— sreejith vs

Опция 1

Если вам не нужно использовать аутентификацию, вы можете добавить конфиги в команды ngrok

ngrok http 9000 --host-header = rewrite

или

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
источник