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

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

Invalid Host Header

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

Ответ 1

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

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

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

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

Ответ 2

Я использовал эту настройку в приложении для реагирования, которое работает. Я создал файл конфигурации с именем 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 {

    }
   }
  );
 }

Не передавать субдомен, если у вас нет пользовательского домена