ngrok가 Resact dev 서버에 연결을 시도할 때 잘못된 호스트 헤더

ngrok가 Resact dev 서버에 연결을 시도할 때 잘못된 호스트 헤더

모바일 장치에서 리액션 응용 프로그램을 테스트하려고 해.ngrok를 사용하여 로컬 서버를 다른 장치에서 사용할 수 있도록 하고 있으며, 다른 다양한 애플리케이션에서 이 기능을 사용할 수 있게 되었다.그러나 react dev 서버에 ngrok를 연결하려고 하면 다음과 같은 오류가 나타난다.

Invalid Host Header 

나는 기본적으로 리액션이 다른 소스의 모든 요청을 차단한다고 믿는다.생각나는 거 있어?

유사한 문제가 발생하여 브라우저에서 응용프로그램을 직접 보는 데까지 작동하는 두 가지 솔루션을 발견함

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

8080을 실행 중인 모든 포트로 대체하십시오.

이 솔루션은 react 앱에서 bundle.js를 꺼내는 임베디드 페이지에서 여전히 오류를 발생시킨다.헤더를 localhost에 다시 쓰기 때문에 이 기능이 내장되면 localhost를 찾는 것이고, 앱이 더 이상 실행되지 않는 localhost를 찾는 것 같다.

옵션 1

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

ngrok http 9000 --host-host-htp=

또는

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

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

옵션 2

웹 팩을 사용하는 경우 다음 구성을 추가하십시오.

devServer: {
    disableHostCheck: true
}

이 경우 인증 헤더는 ngrok 도메인에 대해 유효함

이유는 모르겠지만 모든 것을 시도해 봤지만 나에게는 소용이 없었어.마침내 내게 효과가 있었던 것은 다음과 같다.ngrok http https://localhost:4200 -host-header="localhost:4200"

누군가에게 유용할 수도 있다.

webpack devServer를 사용하는 경우 가장 간단한 방법은 disable을 설정하는 것이다.HostCheck, 다음과 같은 웹 팩 문서를 확인하십시오.

devServer: {
    contentBase: path.join(__dirname, './dist'),
    compress: true,
    host: 'localhost',
    // host: '0.0.0.0',
    port: 8080,
    disableHostCheck: true //for 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 {

    }
   }
  );
 }

사용자 지정 도메인이 없는 경우 하위 도메인을 통과하지 않음

참조URL: https://stackoverflow.com/questions/45425721/invalid-host-header-when-ngrok-tries-to-connect-to-react-dev-server