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을 실행중인 포트로 교체하십시오.

이 솔루션은 임베디드 페이지에서 이것을 사용할 때 여전히 오류를 발생시킵니다. 헤더를 localhost에 다시 작성하기 때문에 헤더가 포함되면 앱이 더 이상 실행되지 않는 localhost를 찾고 있습니다.

— 텍스트
소스

첫 번째는 충분했다

— Sudhir

다른 사람 이이 문제에 부딪친 경우 : 이것은 작동하지만 쿠키를 엉망으로 만드는 것처럼 보입니다. 즉, 로그인 메커니즘 등을 손상시킵니다!

— pdowling

덕분에이 문제는 각도 6도, 그리고 그것을 작동합니다

— Druta 루슬란

는 -host-header첫 번째 예는해야한다, 그래서 포트 번호 앞에 와야한다ngrok http -host-header="localhost:8080" 8080

— 숀 빈이

./ngrok HTTP --host 헤더 = 재 작성 8080

— 대 sreejith

옵션 1

인증을 사용할 필요가없는 경우 ngrok 명령에 구성을 추가 할 수 있습니다

ngrok http 9000 --host-header = 다시 쓰기

또는

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

그러나이 경우 ngrok 다시 쓰기 헤더와 세션이 ngrok 도메인에 유효하지 않기 때문에 웹 사이트에서 인증이 작동하지 않습니다

옵션 2

웹팩을 사용하는 경우 다음 구성을 추가 할 수 있습니다

devServer: {
    disableHostCheck: true
}

이 경우 인증 헤더는 ngrok 도메인에 유효합니다

— 피터 기 chuk
소스

작동하는 반응 앱에서이 설정을 사용했습니다. 다음을 포함하는 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
소스