วิธีการทำ Reverse Proxy ใน Angular 13

วิธีการทำ Reverse Proxy ใน Angular 13

ในปัจจุบันผมมักจะเจอคนถามปัญหาเกี่ยวกับการแก้ปัญหา CORS อยู่บ่อยครั้งซึ่งส่วนมากก็มักจะแนะนำกันให้ไปแก้ที่ server เป็นหลักซึ่งถ้าเราพัฒนา Web Application ด้วย Angular หรือ Framework อื่น ๆ เราสามารถแก้ปัญหาเรื่อง CORS ด้วยการทำ Reverse Proxy ได้ในบทความนี้จะแนะนำวิธีการแก้ปัญหา CORS ในตอน Develop Angular กันครับโดยแบ่งเป็นขั้นตอนดังนี้

ขั้นที่ 1 สร้าง file proxy.conf.json เก็บไว้ใน folder /src โดยมีค่าดังนี้

{
    "/api": {
      "target": "http://localhost:3030",
      "secure": false,
      "pathRewrite": {
        "^/api": ""
      }
    }
}

จากตัวอย่าง /api คือชื่อ url ที่จะเรียกจาก Angular ส่วน target ให้ใส่เป็น url ของ server ที่เราต้องการเรียกไปถึง

ขั้นที่ 2 แก้ไข file angular.json เพื่อเปิดให้เรียกใช้ file config ของเรา ดังภาพ

ตัวอย่างการตั้งค่า angular.json

เติมตรงคำว่า proxyConfig เข้าไปเพื่อให้ dev server ของ angular เรียกใช้ file proxy.conf.json ที่เราสร้างไว้ในขั้นตอนที่ 1

ขั้นที่ 3 เรียกใช้ api ใหม่

ในขั้นตอนนี้เราต้องทำการแก้ไข code นิดหน่อย เช่นจากเดิมเคยเรียกไปที่ server ตรง ๆ เช่น http://localhost:3000/xxx ให้เปลี่ยนเป็น http://localhost:4200/api/xxx โดยคำว่า /api ที่ต่อมาจาก http://localhost:4200 นั้นคือชื่อ url ที่เราตั้งค่าไว้ใน file proxy.conf.json ฉนั้นถ้าตอนตั้งค่าใช้คำอื่นก็ต้องเปลี่ยนตรงนี้ให้ตรงกัน

ขั้นที่ 4 ปรับการ fixed การเรียน url มาเรียกให้ผ่าน environment.ts

ขั้นตอนนี้เป็นขั้นตอนที่แนะนำให้ทำในกรณีที่ ในโปรแกรมเราไม่ได้เรียกใช้ service url / rest api ผ่านการ config ไว้ใน environment แต่เป็นการ fixed ค่าลงไปใน url ตอนเรียกไป service เลยซึ่งแนะนำว่าให้เรียกผ่าน environment จะดีกว่า

ขั้นที่ 4.1 ตั้งค่า host ใน file environment.ts

ใน angular ตอน dev จะอ่านค่าจาก file environment.ts ส่วนตอน build ขึ้น production จะอ่านจาก environment.prod.ts ซึ่งสามารถเปลี่ยนชื่อ file หรือ เพิ่ม stage ได้ที่ file angular.json

จาก ตย. ด้านบนให้แก้ค่าทั้ง 2 file เป็นดังนี้

// environment.ts
export const environment = {
  production: false,
  apiHost: 'api',
};

// environment.prod.ts
export const environment = {
  production: true,
  apiHost: 'api',
};

ขั้นตอนที่ 4.2 เรียกใช้ apiHost ใน service

ในขั้นตอนนี้เราสามารถเรียกใช้ environment จาก service ได้ด้วยการ import เข้ามาหลังจากนั้นก็นำมาแทนค่าจากเดิมจากที่เรียกเข้า server ตรง ๆ เป็นอ่านค่ามาจาก environment แทน ดังตัวอย่าง

import { environment } from 'src/environments/environment';
.
.
createUser(user: User) {
    return this.http.post(`${environment.apiHost}/user`, user);
}
.
.

สำหรับท่านใดที่ลองทำตามแล้วไม่ได้ หรือว่าติดขัดอย่างไรสามารถเข้ามาพูดคุยแลกเปลี่ยนกันได้ที่ facebook : pnpsolution หรือ web site : www.pnpsw.com ได้ครับ