ส่วนหัวของโฮสต์ไม่ถูกต้องเมื่อ 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 ซึ่งแอพไม่ทำงานอีกต่อไป

ตัวเลือกที่ 1

หากคุณไม่ต้องการใช้การรับรองความถูกต้องคุณสามารถเพิ่มการกำหนดค่าลงในคำสั่ง ngrok

ngrok http 9000 --host-header = เขียนใหม่

หรือ

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

แต่ในกรณีนี้การรับรองความถูกต้องจะไม่ทำงานบนเว็บไซต์ของคุณเพราะส่วนหัวการเขียนซ้ำ ngrok และเซสชันไม่ถูกต้องสำหรับโดเมน ngrok ของคุณ

ตัวเลือก 2

หากคุณใช้ webpack คุณสามารถเพิ่มการกำหนดค่าต่อไปนี้

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 {

    }
   }
  );
 }

อย่าผ่านโดเมนย่อยหากคุณไม่มีโดเมนที่กำหนดเอง