reveal.js

# CORS Configuration ระหว่าง Angular และ API Server

Lesson 4 - Angular Universal และ Full-Stack Integration

**CORS (Cross-Origin Resource Sharing)** คือกลไกของ Browser ที่อนุญาตให้เว็บจาก origin หนึ่งเรียก resource จากอีก origin ได้เมื่อ Server กำหนด header อนุญาตอย่างถูกต้อง

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Same-Origin / Browser Security"]
 A["Same-Origin Policy กันเว็บอื่นอ่านข้อมูล"]
 end
 subgraph Era2["ยุค API แยก Domain / Cross-Origin API"]
 B["CORS Headers allow origin"]
 C["Preflight OPTIONS ถามก่อน request จริง"]
 end
 subgraph Era3["ยุค Production Domains"]
 D["Credentials cookie ข้าม origin"]
 E["Strict Origin List domain จริงเท่านั้น"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **`npm install cors`** เพิ่ม CORS Middleware ใน Express
- **`app.use(cors({ origin: 'http://localhost:4200' }))`** กำหนด origin ที่อนุญาต
- **Credentials** ใช้ `cors({ credentials: true })` เมื่อส่ง Cookie
- **Preflight Request** คือ `OPTIONS` ที่ Browser ส่งก่อน request จริงบางประเภท
- **Allowed Methods** กำหนด method เช่น `GET`, `POST`, `PUT`, `DELETE`
- **Allowed Headers** กำหนด header เช่น `Content-Type`, `Authorization`
- **Production** ควรเปลี่ยน origin เป็น domain จริง หลีกเลี่ยง `*` เมื่อมี credentials

---

## ตาราง CORS Settings

| ค่า | หน้าที่ | ตัวอย่าง |
|---|---|---|
| `origin` | domain ที่อนุญาต | `http://localhost:4200` |
| `credentials` | อนุญาต cookie/header credentials | `true` |
| `methods` | method ที่อนุญาต | `GET,POST,PUT,DELETE` |
| `allowedHeaders` | header ที่อนุญาต | `Content-Type,Authorization` |

---

## Mermaid Diagram: Preflight Flow

---

## Code Example

```js
// cors-server.mjs
// ตั้งค่า CORS ให้ Angular dev server เรียก API ได้
import express from 'express';
import cors from 'cors';

const app = express();

app.use(cors({
  origin: process.env.CLIENT_ORIGIN || 'http://localhost:4200',
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

app.use(express.json());

app.get('/api/health', (req, res) => {
  res.json({ status: 'ok' });
});

app.listen(3000, () => console.log('CORS API on http://localhost:3000'));

// ตัวอย่างการใช้งาน:
// npm install express cors
// CLIENT_ORIGIN=http://localhost:4200 node cors-server.mjs
```

```ts
// Angular HttpClient request พร้อม credentials
this.http.get('/api/profile', {
  withCredentials: true
});

// ตัวอย่างการใช้งาน:
// ใช้เมื่อ backend ส่ง cookie เช่น refresh token หรือ session cookie
```

---

## วิดีโอแนะนำ

- [YouTube: CORS Express Angular Explained](https://www.youtube.com/results?search_query=CORS+Express+Angular+explained)

---

## กิจกรรมท้ายบท

- ตั้งค่า CORS ให้รับ origin จาก `http://localhost:4200`
- เปิด `credentials: true` แล้วทดลองส่ง cookie
- ตรวจ Network tab เพื่อดู preflight request
- เปลี่ยน origin เป็น production domain

---

## End

<a href="/web-programming/13-fullstack-integration/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>