webpack-dev-server: กำหนดเส้นทางการเรียก HTTPS API ผ่านพร็อกซีขององค์กร

กำหนดค่าการเชื่อมต่อ API ฝั่ง Node ใน webpack.config.mjs ด้วยรูปแบบอาร์เรย์พร็อกซีปัจจุบัน:

import { HttpsProxyAgent } from 'https-proxy-agent';

export default {
  devServer: {
    proxy: [{
      context: ['/api'],
      target: 'https://service.example',
      changeOrigin: true,
      agent: new HttpsProxyAgent('http://proxy.example:8080'),
      pathRewrite: { '^/api': '' },
    }],
  },
};

เส้นทางคือ:

browser → webpack dev server → corporate proxy → HTTPS API

target ยังคงเป็น HTTPS API ตัวจริง เอเจนต์ซึ่งถือว่ามีอยู่ในโปรเจกต์แล้วจะเจรจาเส้นทางผ่านตัวกลาง HTTP

context เลือกเส้นทางคำขอที่เบราว์เซอร์มองเห็น ส่วน pathRewrite ลบคำนำหน้าสำหรับการพัฒนา อีกทั้งสองไม่ได้ระบุชื่อพร็อกซีขององค์กร เก็บการแมปเหล่านั้นไว้สำหรับเส้นทางที่ API คาดหวัง

ใช้การสตรีมและการจัดการการตอบสนองตามปกติของมิดเดิลแวร์ เพื่อให้การปฏิเสธจาก API และความล้มเหลวในการขนส่งยังแยกแยะได้ รีเลย์ตัวที่สองที่เขียนด้วยมือซึ่งส่งคืน 200 เสมอจะซ่อนผลลัพธ์นั้น

การตั้งค่าพร็อกซีของเบราว์เซอร์และพร็อกซีดาวน์โหลดแพ็กเกจของ npm ใช้กำหนดผู้ใช้อื่น การตั้งค่านี้เป็นของกระบวนการ webpack ที่เรียก API ภายนอก