Tìm Hiểu Về Lỗi CORS: Nguyên Nhân Và Cách Khắc Phục

Cross-Origin Resource Sharing (CORS) là một cơ chế bảo mật được trình duyệt web sử dụng để ngăn chặn các trang web từ truy cập tài nguyên của nhau nếu không được phép. Tuy nhiên, nếu không cấu hình đúng cách, nó có thể gây ra lỗi khiến ứng dụng web không hoạt động như mong muốn. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về lỗi CORS, nguyên nhân, và cách khắc phục.

CORS Là Gì?

CORS cho phép các tài nguyên (như fonts, scripts, hoặc dữ liệu từ API) được chia sẻ giữa các miền khác nhau. Theo mặc định, trình duyệt sẽ chặn các yêu cầu từ một miền (origin) này đến một miền khác nếu không được cấp phép thông qua CORS.

Ví dụ: Nếu trang web A gửi yêu cầu AJAX tới máy chủ B, trình duyệt sẽ kiểm tra liệu B có cho phép A truy cập hay không thông qua các header CORS.

Lỗi CORS Là Gì?

Khi trình duyệt nhận thấy yêu cầu từ một miền không được phép, nó sẽ chặn yêu cầu và trả về lỗi CORS. Dưới đây là một ví dụ phổ biến:

Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'https://your-website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Lỗi này có nghĩa là máy chủ https://api.example.com không cung cấp quyền truy cập cho trang web của bạn.

Nguyên Nhân Gây Ra Lỗi CORS

1. Thiếu Header Access-Control-Allow-Origin
   • Máy chủ không cung cấp header này hoặc không cho phép miền yêu cầu truy cập.
2. Không Hỗ Trợ Yêu Cầu Phức Tạp (Preflight Requests)
   • Khi gửi các yêu cầu sử dụng method như PUT, DELETE, hoặc có custom headers, trình duyệt sẽ thực hiện một yêu cầu kiểm tra trước (preflight) bằng HTTP method OPTIONS. Nếu máy chủ không phản hồi đúng cách, trình duyệt sẽ chặn yêu cầu chính.
3. Quyền Hạn API Bị Hạn Chế (Trường hợp phổ biến)
   • Máy chủ API có thể được cấu hình chỉ cho phép các miền cụ thể hoặc từ chối hoàn toàn các yêu cầu từ các miền không mong muốn.

Cách Khắc Phục Lỗi CORS

1. Cấu Hình Máy Chủ API (Trường hợp phổ biến)

Để cho phép miền khác truy cập, bạn cần cấu hình header Access-Control-Allow-Origin trên máy chủ. Ví dụ:

• Node.js (Express):

const cors = require('cors'); 
app.use(cors({ origin: 'https://your-website.com' }));

2. Cho Phép Preflight Requests

Đảm bảo máy chủ phản hồi đúng cho các yêu cầu OPTIONS:

• Node.js (Express):

app.options('*', cors());

Lưu Ý Quan Trọng

• CORS là một cơ chế bảo mật. Đừng tắt CORS hoàn toàn hoặc cho phép tất cả miền nếu bạn xử lý dữ liệu nhạy cảm.
• Test ứng dụng trên môi trường thực tế để đảm bảo cấu hình đúng đắn.