Lỗi CORS là gì? Nguyên nhân, các cách khắc phục lỗi CORS nhanh chóng

Lỗi CORS (Cross-Origin Resource Sharing) là một vấn đề phổ biến mà các nhà phát triển web thường gặp phải khi ứng dụng của họ cố gắng truy cập tài nguyên từ một nguồn gốc khác. Trong bài viết này, mình sẽ chia sẻ chi tiết tới bạn về lỗi CORS, từ nguyên nhân cốt lõi, các thông báo lỗi thường gặp cho đến những giải pháp khắc phục hiệu quả trên cả phía server và client, đảm bảo ứng dụng của bạn hoạt động mượt mà và an toàn.

Những điểm chính

• Khái niệm CORS: Hiểu rõ CORS là gì và vai trò của CORS như một cơ chế bảo mật cho phép chia sẻ tài nguyên giữa các tên miền.
• Cơ chế hoạt động: Nắm được cách CORS hoạt động thông qua các HTTP header để hiểu rõ vấn đề khi có lỗi xảy ra.
• Bản chất của lỗi CORS: Biết được lỗi CORS là một cơ chế bảo vệ từ trình duyệt, không phải lỗi từ server, giúp bạn định hướng đúng khi khắc phục.
• Nguyên nhân gây lỗi: Xác định được các nguyên nhân cốt lõi gây ra lỗi, từ việc cấu hình sai trên server đến các vấn đề về phương thức HTTP.
• Phân loại lỗi phổ biến: Nhận biết và phân biệt được các thông báo lỗi CORS thường gặp để chẩn đoán chính xác vấn đề.
• Giải pháp khắc phục: Nắm vững các giải pháp khắc phục hiệu quả và an toàn, từ cấu hình phía server, sử dụng proxy đến các giải pháp tạm thời cho môi trường phát triển.
• Quy trình gỡ lỗi: Trang bị quy trình gỡ lỗi có hệ thống và biết cách sử dụng các công cụ cần thiết để xử lý sự cố một cách chuyên nghiệp.
• Giải đáp thắc mắc (FAQ): Nhận được câu trả lời cho các câu hỏi thực tế thường gặp về bảo mật, hiệu suất và cách kiểm tra CORS.

CORS là gì?

CORS (Cross-Origin Resource Sharing) là một cơ chế bảo mật được tích hợp trong các trình duyệt web, cho phép một ứng dụng web chạy tại một tên miền có thể gửi yêu cầu và truy cập các tài nguyên được đặt tại một tên miền hoàn toàn khác. Cơ chế này được tạo ra nhằm mục đích nới lỏng chính sách cùng nguồn gốc (Same Origin Policy) một cách có kiểm soát, qua đó cho phép các máy chủ khác nhau có thể chia sẻ tài nguyên với nhau một cách an toàn và linh hoạt.

Cơ chế hoạt động của CORS 

CORS vận hành dựa trên một quy trình trao đổi thông tin thông qua các HTTP header giữa trình duyệt (client) và máy chủ (server). Quy trình này đảm bảo rằng mọi yêu cầu truy cập tài nguyên từ một nguồn khác đều phải được máy chủ đích xác nhận và cho phép. Khi một ứng dụng web cố gắng thực hiện một yêu cầu cross-origin, trình duyệt sẽ tự động đính kèm thêm một số tiêu đề vào yêu cầu HTTP để thông báo về nguồn gốc và ý định của yêu cầu đó. Các tiêu đề quan trọng gồm:

• Origin: Chứa thông tin về nguồn gốc của website đang gửi yêu cầu.
• Access-Control-Request-Method: Chỉ định phương thức HTTP sẽ được sử dụng trong yêu cầu thực tế.
• Access-Control-Request-Headers: Liệt kê các tiêu đề HTTP bổ sung mà yêu cầu thực tế sẽ sử dụng.

Sau khi nhận được yêu cầu từ trình duyệt, máy chủ sẽ kiểm tra các thông tin này và đối chiếu với chính sách CORS đã được cấu hình. Dựa trên kết quả kiểm tra, máy chủ sẽ gửi lại một phản hồi kèm theo các tiêu đề CORS tương ứng để cho phép hoặc từ chối yêu cầu. Các tiêu đề phản hồi phổ biến từ máy chủ bao gồm:

• Access-Control-Allow-Origin: Xác định nguồn gốc được phép truy cập tài nguyên. Giá trị có thể là một domain cụ thể hoặc ký tự đại diện * để cho phép mọi nguồn.
• Access-Control-Allow-Methods: Liệt kê các phương thức HTTP (ví dụ: GET, POST, DELETE) mà máy chủ cho phép.
• Access-Control-Allow-Headers: Chỉ định các tiêu đề HTTP mà trình duyệt được phép gửi trong yêu cầu thực tế.
• Access-Control-Allow-Credentials: Cho biết liệu yêu cầu có được phép mang theo thông tin xác thực (như cookies hoặc HTTP Authentication) hay không.
• Access-Control-Expose-Headers: Cho phép phía client có thể truy cập vào các tiêu đề cụ thể trong phản hồi.
• Access-Control-Max-Age: Quy định thời gian (tính bằng giây) mà kết quả của một yêu cầu kiểm tra trước có thể được lưu vào bộ nhớ đệm (cache).

Lỗi CORS là gì?

Lỗi CORS là là một cơ chế bảo mật của trình duyệt web, xảy ra khi một trang web tại một tên miền (origin) cố gắng yêu cầu tài nguyên (ví dụ: API, hình ảnh, font chữ) từ một tên miền khác nhưng không được máy chủ của tên miền đó cho phép. Lỗi này không có nghĩa là yêu cầu gửi đi bị sai, mà là do máy chủ đích đã không trả về các tiêu đề (HTTP headers) cần thiết để cấp quyền cho tên miền gốc thực hiện truy vấn.

Về bản chất, cơ chế này được sinh ra để bảo vệ người dùng, ngăn chặn các yêu cầu trái phép từ các trang web không đáng tin cậy. Lỗi CORS không phải là lỗi từ máy chủ, mà là chính sách bảo mật mà trình duyệt thực thi.

Nguyên nhân cốt lõi gây ra lỗi CORS

Dưới đây là các yếu tố chính gây ra lỗi CORS:

• Cấu hình tiêu đề CORS không chính xác: Là nguyên nhân phổ biến nhất, khi quản trị viên phía máy chủ thiết lập sai hoặc thiếu các tiêu đề Access-Control-* cần thiết.
• Nguồn gốc (Origin) không được phép: Trình duyệt luôn gửi tiêu đề Origin trong yêu cầu cross-origin. Nếu máy chủ không trả về tiêu đề Access-Control-Allow-Origin, hoặc giá trị của tiêu đề này không khớp với nguồn gốc của yêu cầu (và cũng không phải là *), trình duyệt sẽ chặn phản hồi.
• Phương thức HTTP hoặc tiêu đề tùy chỉnh không được cho phép: Yêu cầu chứa các tiêu đề tùy chỉnh mà máy chủ không liệt kê trong tiêu đề Access-Control-Allow-Headers và Access-Control-Allow-Methods của phản hồi.
• Yêu cầu kiểm tra trước bị từ chối: Đối với các yêu cầu phức tạp đã đề cập, trình duyệt sẽ tự động gửi một yêu cầu kiểm tra sơ bộ bằng phương thức OPTIONS trước khi gửi yêu cầu chính thức. Nếu phản hồi cho yêu cầu OPTIONS này không chứa các tiêu đề CORS hợp lệ, yêu cầu chính sẽ bị hủy và gây ra lỗi.
• Khóa API bị thiếu hoặc không hợp lệ: Trong nhiều trường hợp, API yêu cầu một khóa xác thực để cấp quyền truy cập. Nếu khóa API này bị thiếu, không hợp lệ, hoặc sai định dạng trong tiêu đề yêu cầu, máy chủ sẽ từ chối yêu cầu. Việc từ chối này dẫn đến máy chủ không trả về các tiêu đề CORS cần thiết, và do đó trình duyệt sẽ báo lỗi CORS.

Lỗi thiếu tiêu đề Access-Control-Allow-Origin

Lỗi thiếu tiêu đề xảy ra khi máy chủ đích không trả về tiêu đề Access-Control-Allow-Origin. Điều này cho thấy máy chủ chưa được cấu hình để cho phép bất kỳ yêu cầu nào từ nguồn gốc khác, vì vậy trình duyệt sẽ chặn yêu cầu để đảm bảo an toàn.

Lỗi nguồn gốc không khớp

Lỗi này phát sinh khi máy chủ có trả về tiêu đề Access-Control-Allow-Origin, nhưng giá trị của tiêu đề không khớp với nguồn gốc của website gửi yêu cầu. Điều này có nghĩa là chính sách CORS của máy chủ đã được thiết lập, nhưng không cấp phép cho tên miền của bạn.

Lỗi phương thức bị cấm

Lỗi này xảy ra khi yêu cầu sử dụng một phương thức HTTP (ví dụ: PUT, DELETE) không được máy chủ cho phép. Trong phản hồi cho yêu cầu kiểm tra trước (preflight), máy chủ đã không liệt kê phương thức này trong tiêu đề Access-Control-Allow-Methods.

Lỗi tiêu đề tùy chỉnh bị cấm

Lỗi này phát sinh khi yêu cầu chứa một tiêu đề HTTP tùy chỉnh (ví dụ: Authorization) mà máy chủ không cho phép. Tiêu đề này phải được khai báo tường minh trong danh sách Access-Control-Allow-Headers từ phản hồi của máy chủ.

1. Cấu hình phía máy chủ (Server-side) để cho phép CORS

Nếu bạn có quyền truy cập và chỉnh sửa mã nguồn của dịch vụ backend, thì cấu hình phía máy chủ sẽ là phương pháp được khuyến nghị hàng đầu. Việc cấu hình này bao gồm việc thêm các tiêu đề HTTP phù hợp vào phản hồi của máy chủ.

• Cấu hình tiêu đề Access-Control-Allow-Origin: Bạn cấu hình máy chủ (Web Server như Apache, Nginx hoặc Framework Backend) để thêm tiêu đề này vào phản hồi. Giá trị của tiêu đề có thể là một tên miền cụ thể (ví dụ: https://your-frontend-app.com) để tăng cường bảo mật, hoặc sử dụng ký tự đại diện * để cho phép yêu cầu từ tất cả các nguồn gốc.
• Xác định rõ ràng các phương thức HTTP được phép: Bạn sử dụng tiêu đề Access-Control-Allow-Methods để liệt kê các phương thức mà máy chủ chấp nhận, chẳng hạn như GET, POST, PUT, DELETE.
• Cho phép các tiêu đề tùy chỉnh cần thiết: Nếu phía client gửi các tiêu đề tùy chỉnh (ví dụ: Authorization), bạn phải khai báo chúng trong tiêu đề Access-Control-Allow-Headers.
• Cho phép gửi thông tin xác thực: Trong trường hợp yêu cầu cần gửi kèm cookie hoặc thông tin xác thực, máy chủ cần trả về tiêu đề Access-Control-Allow-Credentials với giá trị là true.

2. Sử dụng Proxy Server như giải pháp trung gian

Trong trường hợp bạn không thể can thiệp vào cấu hình của máy chủ API từ xa, việc thiết lập một proxy server là một giải pháp thay thế vô cùng hữu hiệu. Giải pháp này hoạt động dựa trên nguyên tắc rằng chính sách cùng nguồn gốc được thực thi bởi trình duyệt chứ không phải giữa các máy chủ. Thay vì ứng dụng client gọi trực tiếp đến API từ xa, ứng dụng sẽ gửi yêu cầu đến proxy server của bạn. 

Sau đó, proxy server sẽ thay mặt client để gọi đến API từ xa, nhận phản hồi và cuối cùng chuyển tiếp phản hồi đó về cho trình duyệt. Khi chuyển tiếp phản hồi, proxy server có thể thêm vào tiêu đề Access-Control-Allow-Origin: * hoặc một nguồn gốc cụ thể. Vì yêu cầu cuối cùng mà trình duyệt nhận được là từ chính proxy server (cùng nguồn gốc hoặc đã được cấu hình CORS hợp lệ), lỗi CORS sẽ không còn xảy ra.

3. Cấu hình CORS trên dịch vụ đám mây

Nếu tài nguyên của bạn được lưu trữ trên các dịch vụ đám mây như Amazon S3, Azure Blob Storage, hay Google Cloud Storage, bạn cần phải cấu hình chính sách CORS trực tiếp trên các nền tảng này. Hầu hết các nhà cung cấp dịch vụ đám mây đều cung cấp giao diện hoặc công cụ dòng lệnh để bạn có thể định nghĩa các quy tắc CORS, cho phép các tên miền cụ thể truy cập vào tài nguyên của mình.

4. Giải pháp tạm thời và chỉ dùng trong quá trình phát triển (Client-side)

Các phương pháp dưới đây chỉ nên được xem là giải pháp tạm thời trong môi trường phát triển và gỡ lỗi, không phải là cách giải quyết vấn đề cho sản phẩm cuối cùng. Chúng giúp bỏ qua lỗi CORS ở phía client nhưng không thể buộc máy chủ cho phép một yêu cầu nếu chính sách của máy chủ quá hạn chế.

• Sử dụng tiện ích mở rộng trình duyệt: Các tiện ích như Moesif Origin & CORS Changer hay CORS Unblock có thể tự động thêm tiêu đề Access-Control-Allow-Origin: * vào mọi phản hồi HTTP. Cách làm này hoạt động tương tự một proxy nhưng chỉ có tác dụng cục bộ trên máy tính đã cài đặt tiện ích. Do đó, phương pháp này chỉ hữu ích cho mục đích kiểm thử cá nhân của lập trình viên.
• Vô hiệu hóa chế độ bảo mật web trên trình duyệt: Phương pháp này cho phép bạn khởi động trình duyệt mà không có các rào cản bảo mật, bao gồm cả chính sách CORS. Bạn có thể thực hiện bằng cách chạy trình duyệt từ cửa sổ dòng lệnh với cờ --disable-web-security. Tuy nhiên, trình duyệt sẽ hiển thị cảnh báo về rủi ro bảo mật và sự bất ổn định. Phương pháp này tuyệt đối không được áp dụng cho người dùng cuối.

Quy trình gỡ lỗi CORS

1. Kiểm tra bảng điều khiển của trình duyệt: Bạn mở công cụ phát triển của trình duyệt (thường bằng phím F12) và chuyển đến tab Console. Thông báo lỗi CORS tại đây sẽ cung cấp thông tin chi tiết về nguyên nhân, chẳng hạn như thiếu tiêu đề hay phương thức không được phép.
2. Xem xét tài liệu API: Nếu bạn đang làm việc với một API của bên thứ ba, hãy kiểm tra kỹ tài liệu của họ. Tài liệu thường sẽ ghi rõ chính sách CORS, các nguồn gốc được phép, các phương thức và tiêu đề được hỗ trợ, cũng như các yêu cầu xác thực cần thiết.
3. Kiểm tra tiêu đề phản hồi của máy chủ: Sử dụng tab Network trong công cụ phát triển của trình duyệt để kiểm tra yêu cầu bị lỗi. Bạn chọn yêu cầu đó và xem phần Headers của phản hồi. Hãy xác minh xem tiêu đề Access-Control-Allow-Origin có tồn tại hay không và giá trị của tiêu đề có khớp với nguồn gốc website của bạn hoặc là * hay không.
4. Xác minh yêu cầu phía client: Kiểm tra lại mã nguồn phía client, đặc biệt là đoạn mã thực hiện yêu cầu. Bạn cần đảm bảo rằng bạn không gửi các tiêu đề tùy chỉnh không cần thiết hoặc sử dụng các phương thức HTTP phức tạp trừ khi API yêu cầu và máy chủ đã được cấu hình để chấp nhận chúng.
5. Đáp ứng yêu cầu Preflight: Nếu lỗi liên quan đến yêu cầu kiểm tra trước, bạn hãy chắc chắn rằng máy chủ đã được cấu hình để xử lý đúng các yêu cầu OPTIONS. Phản hồi cho yêu cầu này phải chứa các tiêu đề Access-Control-Allow-Methods và Access-Control-Allow-Headers phù hợp.

Công cụ và kỹ thuật chẩn đoán lỗi

Bên cạnh công cụ phát triển tích hợp sẵn trong trình duyệt, có nhiều công cụ khác có thể hỗ trợ quá trình chẩn đoán và xử lý sự cố CORS một cách hiệu quả hơn.

• Các tiện ích mở rộng trình duyệt: Các tiện ích như CORS Helper có thể giúp bạn trực quan hóa và gỡ lỗi các vấn đề liên quan đến CORS ngay trên trình duyệt, cung cấp các thông tin chẩn đoán hữu ích.
• Chrome DevTools và Firefox Developer Tools: Tab Network cho phép bạn phân tích chi tiết từng yêu cầu và phản hồi, bao gồm tất cả các tiêu đề HTTP, giúp bạn nhanh chóng xác định vấn đề nằm ở đâu.
• Postman: Là một nền tảng phổ biến để kiểm thử API, Postman cho phép bạn gửi các yêu cầu HTTP tùy chỉnh đến máy chủ mà không bị ràng buộc bởi chính sách CORS của trình duyệt. Bằng cách này, bạn có thể xác định liệu vấn đề có thực sự nằm ở cấu hình CORS của máy chủ hay do một yếu tố nào khác trong mã nguồn client.

Qua bài viết này, bạn đã nắm rõ khái niệm lỗi CORS, hiểu được nguyên nhân phổ biến dẫn đến lỗi cũng như biết được các phương pháp khắc phục chi tiết và hiệu quả, từ việc cấu hình server đến sử dụng proxy. Nếu muốn mở rộng kiến thức và tối ưu hóa hệ thống máy chủ, bạn có thể tìm hiểu thêm một số bài viết dưới đây: