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

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

---

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

Invalid Host Header 

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

---

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

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

분명히 8080을 현재 사용중인 포트로 교체하십시오.

이 솔루션은 포함 된 페이지에서 이것을 사용할 때 여전히 오류를 발생시킵니다. 이는 반응 앱에서 bundle.js를 가져옵니다. 나는 그것이 내장 될 때 localhost에 헤더를 다시 작성하기 때문에 앱이 더 이상 실행되지 않는 localhost를 찾습니다.

---

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