Lỗi CORS là gì? Nguyên nhân và cách khắc phục chi tiết

Lỗi CORS là một trong những vấn đề phổ biến khi phát triển ứng dụng web hiện đại, đặc biệt khi frontend và backend được tách biệt trên nhiều domain khác nhau. Lỗi này xuất hiện do trình duyệt chặn các yêu cầu cross-origin không hợp lệ theo cơ chế bảo mật. Việc hiểu rõ CORS giúp lập trình viên xử lý lỗi nhanh hơn và xây dựng hệ thống an toàn hơn.

CORS là gì và CORS error xảy ra khi nào?

CORS (Cross-Origin Resource Sharing) là cơ chế bảo mật của trình duyệt, cho phép hoặc chặn việc truy cập tài nguyên giữa các domain khác nhau. Cơ chế này giúp kiểm soát việc một website có thể lấy dữ liệu từ API, font, script hoặc tài nguyên nằm ở domain khác.

CORS error xuất hiện khi trình duyệt chặn một request vì domain hiện tại không được server cho phép truy cập. Lỗi này xảy ra khi thiếu hoặc cấu hình sai các header CORS như Access-Control-Allow-Origin, khiến yêu cầu giữa các domain không đáp ứng quy tắc bảo mật của trình duyệt.

Cách hoạt động của CORS và nguyên nhân gây ra lỗi CORS

CORS hoạt động dựa trên cơ chế kiểm soát truy cập giữa các domain khác nhau để đảm bảo an toàn khi trình duyệt gửi yêu cầu đến máy chủ khác nguồn. Khi một website thực hiện request cross-origin, trình duyệt sẽ tự động thêm các header để thông báo thông tin yêu cầu, sau đó máy chủ sẽ quyết định có cho phép truy cập hay không.

Trong quá trình gửi request, trình duyệt thường bổ sung các thông tin như Origin để xác định nguồn gốc website, Access-Control-Request-Method để chỉ định phương thức HTTP được sử dụng và Access-Control-Request-Headers để liệt kê các header đi kèm. Những thông tin này giúp server hiểu rõ bối cảnh của yêu cầu trước khi phản hồi.

Sau khi nhận request, máy chủ sẽ trả về các header CORS để kiểm soát quyền truy cập. Nếu cấu hình đúng, server sẽ gửi Access-Control-Allow-Origin để chỉ định domain được phép truy cập, Access-Control-Allow-Methods để xác định phương thức hợp lệ và Access-Control-Allow-Headers để kiểm soát các header được chấp nhận. Ngoài ra, một số header khác như Access-Control-Allow-Credentials hoặc Access-Control-Max-Age cũng được sử dụng để quản lý mức độ và thời gian cho phép truy cập.

Lỗi CORS xảy ra khi trình duyệt phát hiện phản hồi từ server không đáp ứng chính sách bảo mật này. Nguyên nhân phổ biến thường đến từ việc thiếu header Access-Control-Allow-Origin, cấu hình sai domain được phép truy cập hoặc không hỗ trợ đúng phương thức HTTP mà client gửi lên. Khi đó, trình duyệt sẽ tự động chặn response dù request vẫn được gửi thành công đến server.

Các loại CORS Error phổ biến

CORS Error thường xuất hiện khi trình duyệt phát hiện request giữa các domain không đáp ứng đúng chính sách bảo mật Cross-Origin Resource Sharing. Mỗi loại lỗi phản ánh một nguyên nhân cấu hình khác nhau từ phía máy chủ.

No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Lỗi này xảy ra khi máy chủ không trả về header Access-Control-Allow-Origin trong phản hồi. Trình duyệt không xác định được domain nào được phép truy cập nên tự động chặn request để đảm bảo an toàn.

The ‘Access-Control-Allow-Origin’ header has a value that is not equal to the supplied origin

Lỗi này xuất hiện khi giá trị Access-Control-Allow-Origin không khớp với origin của request. Máy chủ chỉ cho phép một số domain cụ thể, trong khi domain hiện tại không nằm trong danh sách được cấp quyền truy cập.

CORS policy – Method is not allowed by Access-Control-Allow-Methods

Lỗi này xảy ra khi phương thức HTTP không được máy chủ cho phép. Ví dụ, server chỉ hỗ trợ GET và POST nhưng request lại sử dụng PUT hoặc DELETE, dẫn đến việc trình duyệt chặn yêu cầu theo chính sách CORS.

CORS policy – Request header field is not allowed by Access-Control-Allow-Headers

Lỗi này xuất hiện khi request gửi kèm header tùy chỉnh nhưng máy chủ không cho phép sử dụng. Nếu header không được khai báo trong Access-Control-Allow-Headers, trình duyệt sẽ từ chối thực hiện request.

Cách khắc phục CORS Error

CORS Error có thể được xử lý theo nhiều hướng khác nhau tùy vào quyền truy cập hệ thống backend và kiến trúc ứng dụng. Việc lựa chọn đúng phương pháp giúp đảm bảo vừa hoạt động ổn định vừa giữ an toàn bảo mật.

Cấu hình máy chủ để cho phép CORS

Nếu có quyền truy cập backend, việc xử lý CORS nên thực hiện trực tiếp tại server. Máy chủ cần trả về header Access-Control-Allow-Origin với giá trị phù hợp, có thể là một domain cụ thể hoặc * trong trường hợp cho phép tất cả nguồn truy cập.

Ngoài ra, cần khai báo rõ các phương thức HTTP được phép trong Access-Control-Allow-Methods và xác định các header hợp lệ thông qua Access-Control-Allow-Headers. Nhiều framework như Express.js trong Node.js đã hỗ trợ middleware cors để cấu hình nhanh hơn.

Cần lưu ý rằng cấu hình mở quá rộng có thể làm tăng rủi ro bảo mật như CSRF hoặc truy cập trái phép.

Sử dụng proxy server để tránh lỗi CORS

Do Same-Origin Policy chỉ áp dụng trên trình duyệt, proxy server có thể đóng vai trò trung gian để xử lý request. Thay vì gọi API trực tiếp từ frontend, request sẽ được gửi đến proxy server trước.

Proxy server sau đó sẽ gọi API thật, nhận dữ liệu và trả lại cho client kèm theo header CORS phù hợp. Cách này giúp bypass giới hạn trình duyệt và xử lý lỗi hiệu quả trong nhiều trường hợp.

Người dùng có thể tự xây dựng proxy riêng hoặc sử dụng dịch vụ như CORS Anywhere. Tuy nhiên, proxy dùng chung có thể gặp hạn chế về tốc độ và độ ổn định, nên giải pháp tự triển khai thường được ưu tiên cho hệ thống lớn.

Cấu hình CORS trên dịch vụ cloud

Một số dịch vụ như AWS S3, Azure Blob Storage hoặc Google Cloud Storage hỗ trợ cấu hình CORS trực tiếp trên hệ thống. Người dùng cần thiết lập policy để xác định domain nào được phép truy cập tài nguyên.

Việc cấu hình đúng giúp tránh lỗi ngay từ tầng lưu trữ, đặc biệt khi frontend và backend được tách biệt trên các domain khác nhau.

Sử dụng browser extension để vượt lỗi khi phát triển

Trong môi trường phát triển, có thể sử dụng extension như CORS Unblock để tạm thời bypass lỗi. Tiện ích này thêm header Access-Control-Allow-Origin: * vào response để trình duyệt cho phép truy cập.

Tuy nhiên, đây chỉ là giải pháp tạm thời và không nên áp dụng cho môi trường production. Việc sử dụng extension chỉ phù hợp để test nhanh trong quá trình phát triển hệ thống.

CORS là cơ chế bảo mật quan trọng giúp kiểm soát truy cập giữa các domain, nhưng cũng là nguyên nhân gây ra nhiều lỗi trong quá trình phát triển web. Khi hiểu đúng cách hoạt động và cấu hình chính xác trên server, lỗi CORS có thể được xử lý hiệu quả. Việc áp dụng đúng giải pháp sẽ giúp hệ thống vận hành ổn định và giảm thiểu các sự cố liên quan đến truy cập cross-origin.