[reactjs] ngrok이 React dev 서버에 연결하려고 할 때 잘못된 호스트 헤더

Program / 글쓴이

모바일 장치에서 React 응용 프로그램을 테스트하려고합니다. ngrok을 사용하여 로컬 서버를 다른 장치에서 사용할 수있게하고 다양한 다른 응용 프로그램 에서이 작업을 수행했습니다. 그러나 ngrok를 React dev 서버에 연결하려고하면 오류가 발생합니다.

Invalid Host Header

React는 기본적으로 다른 소스의 모든 요청을 차단한다고 생각합니다. 이견있는 사람?

답변

비슷한 문제가 발생하여 브라우저에서 직접 응용 프로그램을 보는 한 두 가지 솔루션을 발견했습니다.

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

분명히 8080을 실행중인 포트로 교체하십시오.

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

답변

옵션 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 {

    }
   }
  );
 }

맞춤 도메인이없는 경우 하위 도메인을 전달하지 마십시오.

답변