# Thiết lập AWS CloudFront cho S3 và API Gateway để tránh lỗi CORS

## Lời mở đầu

Với việc ứng dụng nhiều dịch vụ của AWS, nhất là khi build hệ thống Serverless, thường thấy mô hình quen thuộc là

- S3: chứa html, javascript, css files
- API Gateway + Lambda function: api , business logic
- DynamoDB: Database

Với mô hình này, thường người mới lập trình sẽ gặp phải lỗi CORS khi gọi API từ html(ajax).
CORS là lỗi xảy ra khi domain truy cập khác với domain tiếp nhận truy cập, được tất cả browser support vì đảm bảo tính bảo mật.

## Các cách khắc phục lỗi CORS

### 1. Xử lý trong kết quả trả về của lambda function
Cách đơn giản là trong response khi trả về, gán thêm thông số sau trong headers.

const response = {
                    'statusCode': 200,
                    headers: {
                        "Access-Control-Allow-Origin": "REQUEST_DOMAIN",
                    },
                    'body': JSON.stringify({
                        ...
                    })
                }

### 2. Dùng AWS Cloudfront để đồng nhất domain
[Tham khảo về CloudFront tại đây](https://aws.amazon.com/vi/cloudfront/)
Ý tưởng là dùng Cloudfront thành public domain đền người dùng, sau đó cấu hình cloudfront như một proxy để khi brwoser lấy tài nguyên html, css thì trỏ đến S3, còn khi gọi API thì trỏ đến API Gateway.
Khi đó, vì html và api cùng chung domain (của cloudfront tạo ra), nên lỗi CORS không xảy ra nữa.

#### Cách cấu hình cụ thể
1. thiết lập path của api bắt đầu bằng /api/

2. Thiết lập cloudfront

... Continue