Cách khắc phục lỗi CORS | Giải quyết bằng "Access-Control-Allow-Origin"
CORS được thiết lập ở phía server. Không thể giải quyết triệt để từ phía frontend. Nếu bạn tự viết API, hãy thêm header; nếu dùng API bên ngoài, hãy cân nhắc dùng Proxy.
Lỗi CORS là gì?
Trình duyệt có một hạn chế gọi là “Same-Origin”. Nếu trang web tại https://example.com gọi API tại https://api.other.com, vì chúng khác origin, mặc định sẽ bị chặn. Đây chính là cơ chế của CORS (Cross-Origin Resource Sharing).
Trình duyệt sẽ vứt bỏ phản hồi và báo lỗi nếu server không trả về header Access-Control-Allow-Origin để nói rằng “Tôi cho phép yêu cầu từ origin này”.
CORS là thiết lập ở phía server. Việc thay đổi code ở frontend sẽ không giải quyết được vấn đề nếu server không gửi về header chính xác.
Luồng xử lý (3 bước)
Nếu bạn tự phát triển API, hãy thêm header Access-Control-Allow-Origin trên server
Nếu dùng API bên ngoài, hãy đặt một Proxy trên backend của mình
Khi phát triển, hãy thử nghiệm với các API cho phép CORS (như JSONPlaceholder)
Cách xử lý theo từng tình huống
| Tình huống | Cách xử lý |
|---|---|
| Bạn tự phát triển API | Thêm header `Access-Control-Allow-Origin` vào phản hồi từ server (Express, FastAPI, Spring, v.v.). Để an toàn, chỉ nên cho phép các origin cụ thể khi chạy thực tế. |
| Sử dụng API bên ngoài | Nếu API đó không cho phép CORS, hãy thiết lập Proxy trên server của chính bạn. Khi đó luồng Frontend -> Server của bạn -> API bên ngoài sẽ được coi là cùng origin. |
| Thử nghiệm khi phát triển | Sử dụng các API cho phép CORS như JSONPlaceholder. Hoặc sử dụng các extension trình duyệt tắt CORS tạm thời (tuyệt đối không dùng khi chạy thực tế). |
Tổng kết
Lỗi CORS xảy ra do server không xác nhận rằng “Origin này được phép truy cập”. Vì không thể giải quyết chỉ bằng frontend, hãy kiểm tra thiết lập phía server hoặc cân nhắc sử dụng Proxy. Khi gỡ lỗi API, bạn cũng có thể tận dụng các công cụ như Định dạng JSON hoặc Giải mã JWT.
🧪 Kiểm tra phản hồi API bằng công cụ định dạng JSON
Bạn có thể định dạng và kiểm tra JSON lấy từ các API cho phép CORS