Proxy ใน Angular: แก้ปัญหา CORS

เรามาทำความเข้าใจและใช้งาน Proxy ใน Angular เพื่อแก้ไขปัญหา CORS

ในการพัฒนาแอปพลิเคชัน Angular โดยเฉพาะอย่างยิ่งเมื่อต้องเรียกใช้ API จากโดเมนอื่น ๆ เราจะพบเจอกับปัญหา CORS (Cross-Origin Resource Sharing) ซึ่งเป็นกลไกความปลอดภัยของเบราว์เซอร์ที่จำกัดการเข้าถึงทรัพยากรจากโดเมนอื่น ๆ เพื่อป้องกันการโจมตีแบบ Cross-Site Request Forgery (CSRF)

Proxy คืออะไร?

Proxy เป็นเหมือนตัวกลางที่ทำหน้าที่รับและส่งต่อคำขอ (request) ไปยังเซิร์ฟเวอร์เป้าหมาย โดยไม่ให้ client (คือ browser ของเรา) รู้ว่ากำลังเชื่อมต่อกับเซิร์ฟเวอร์อื่นอยู่ ทำให้เราสามารถหลีกเลี่ยงปัญหา CORS ได้

การตั้งค่า Proxy ใน Angular

Angular CLI มีฟีเจอร์ที่ช่วยให้เราสามารถตั้งค่า Proxy ได้ง่าย ๆ ผ่านไฟล์ proxy.conf.json และตัวเลือก --proxy-config ในคำสั่ง ng serve

ตัวอย่างไฟล์ proxy.conf.json:


{
  "/api": {
    "target": "https://your-api-endpoint.com",
    "secure": true,
    "changeOrigin": true
  }
}

/api: คือ path ที่เราจะใช้ในการเรียก API ใน Angular
target: https://your-api-endpoint.com: คือ URL ของ API ที่เราต้องการจะเชื่อมต่อ
secure: true: กำหนดให้การเชื่อมต่อกับ API ใช้ HTTPS
changeOrigin: true: กำหนดให้ header ของ request ที่ส่งไปยัง API ถูกเปลี่ยนแปลง เพื่อให้ API คิดว่า request นั้นมาจาก client โดยตรง

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

// เพิ่ม  pvt ใน configurations:{...}
"pvt": {
  "fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.pvt.ts"
  }
    ]
  },
// เพิ่ม  pvt ใน serve :{...}
"pvt": {
  "buildTarget": "app:build:pvt"
}

การตั้งค่า environment

สร้างไฟล์ src/environments/environment.pvt.ts และ environment.ts เพื่อความสะดวกในการจัดการและปรับเปลี่ยนค่า

//environment.ts
export const environment: any = {
    name: 'develop',
    production: false,
    baseAPIURL: '/api',
}

//environment.pvt.ts
export const environment: any = {
    name: 'pvt',
    production: false,
    baseAPIURL: '/api',
}

ตัวอย่างการใช้งาน

ตัวอย่างโค้ด Angular:


import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData() {
  return this.http.get('/data');
}


ng serve --host 0.0.0.0 -c pvt --proxy-config proxy.conf.json

เมื่อเรารันคำสั่งนี้ Angular CLI จะเริ่มต้น Server และอ่านค่าจากไฟล์ proxy.conf.json เมื่อเราเรียก API ใน Angular โดยใช้ path /api Angular จะทำการส่งต่อ request นั้นไปยัง URL ที่กำหนดไว้ใน target

เหตุผลที่ควรใช้ Proxy

แก้ไขปัญหา CORS: ช่วยให้เราสามารถเรียกใช้ API จากโดเมนอื่น ๆ ได้
เพิ่มความปลอดภัย: สามารถใช้ Proxy เพื่อเพิ่มชั้นความปลอดภัยในการสื่อสารระหว่าง client และ server
จัดการ traffic: สามารถใช้ Proxy เพื่อจัดการ traffic และทำ caching ได้
ง่ายต่อการใช้งาน: Angular CLI ทำให้การตั้งค่า Proxy เป็นเรื่องง่าย

สรุป

การใช้ Proxy ใน Angular เป็นวิธีการที่ง่ายและมีประสิทธิภาพในการแก้ไขปัญหา CORS และช่วยให้เราสามารถพัฒนาแอปพลิเคชัน Angular ได้อย่างราบรื่นมากยิ่งขึ้น โดยเฉพาะอย่างยิ่งเมื่อต้องทำงานกับ API ที่อยู่บนโดเมนที่แตกต่างกัน