Lỗi CORS là gì? Nguyên nhân và cách khắc phục hiệu quả cho website

Lỗi CORS thường xuất hiện khi bạn cố gắng tương tác giữa các tài nguyên từ các nguồn gốc khác nhau, gây ra tình trạng chặn yêu cầu và ảnh hưởng đến trải nghiệm người dùng. Trong bài viết này, mình sẽ cùng bạn tìm hiểu chi tiết về lỗi CORS là gì, nguyên nhân gốc rễ dẫn đến lỗi, các loại lỗi thường gặp và quan trọng nhất là hướng dẫn cách khắc phục chúng một cách hiệu quả và an toàn trên các nền tảng phổ biến.

Những điểm chính

1. Khái niệm Lỗi CORS: Nắm được lỗi CORS là một hành động bảo vệ của trình duyệt, không phải lỗi từ server, giúp định hướng đúng khi khắc phục.
2. Vai trò của HTTP Headers: Biết được các tiêu đề HTTP nào đóng vai trò then chốt trong việc cho phép hoặc từ chối một yêu cầu cross-origin.
3. Các tiêu đề CORS trong phản hồi: Biết được các tiêu đề CORS được máy chủ gửi khi phản hồi.
4. Nguyên nhân gây lỗi CORS: 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 và tiêu đề HTTP.
5. Các loại lỗi thường gặp: Nhận biết và phân biệt các thông báo lỗi CORS phổ biến để chẩn đoán chính xác vấn đề.
6. Ví dụ về lỗi CORS: Hiểu nguyên nhân trình duyệt chặn yêu cầu và cách nhận biết lỗi qua ví dụ thực tế giữa hai domain khác nhau.
7. 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.
8. 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.
9. Tối ưu tốc độ website với Vietnix: Tìm hiểu về dịch vụ tối ưu tốc độ của Vietnix để nâng cao hiệu suất và trải nghiệm người dùng cho ứng dụng của bạn.
10. 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ề lý do cần CORS, cách kiểm tra và các khuyến nghị bảo mật.

Lỗi CORS là gì?

Lỗi CORS xảy ra khi một trình duyệt web chủ động ngăn chặn một yêu cầu HTTP được gửi đến một nguồn (bao gồm domain, giao thức, hoặc cổng) khác với nguồn mà website hiện tại đang được tải. Nguyên nhân của việc này là do yêu cầu đó đã vi phạm các quy tắc được định ra trong chính sách bảo mật CORS.

Việc xuất hiện lỗi CORS là một trong những vấn đề phổ biến nhất mà các nhà phát triển ứng dụng web thường xuyên gặp phải. Nếu cấu hình CORS trên máy chủ backend không được thiết lập một cách chính xác hoặc bị thiếu, trình duyệt sẽ không nhận được sự cho phép cần thiết, dẫn đến việc chặn yêu cầu và hiển thị thông báo lỗi CORS trong bảng điều khiển.

Vai trò của các tiêu đề HTTP

Khi một website cố gắng thực hiện một yêu cầu cross-origin, trình duyệt sẽ tự động thêm các tiêu đề HTTP sau vào yêu cầu để thông báo cho máy chủ về bối cảnh của truy vấn:

• Origin: Tiêu đề này chứa thông tin về nguồn gốc (giao thức, domain và cổng) của website đang gửi yêu cầu.
• Access-Control-Request-Method: Tiêu đề này được sử dụng trong các yêu cầu kiểm tra trước (preflight request) để cho máy chủ biết phương thức HTTP nào (ví dụ: GET, POST) sẽ được sử dụng trong yêu cầu thực tế.
• Access-Control-Request-Headers: Tương tự như trên, tiêu đề này cũng được dùng trong preflight request để thông báo cho máy chủ về các tiêu đề HTTP bổ sung mà yêu cầu thực tế sẽ sử dụng.

Các tiêu đề CORS trong phản hồi

Để đáp lại yêu cầu từ trình duyệt, máy chủ sẽ gửi một phản hồi kèm theo một số tiêu đề CORS đặc biệt để cho phép hoặc từ chối yêu cầu đó:

• Access-Control-Allow-Origin: Đây là tiêu đề xác định nguồn gốc nào được phép truy cập vào tài nguyên của máy chủ. Giá trị của tiêu đề này có thể là một domain cụ thể hoặc dấu * để cho phép tất cả các nguồn.
• Access-Control-Allow-Methods: Tiêu đề này chỉ định danh sách các phương thức HTTP (ví dụ: GET, POST, PUT) mà client được phép sử dụng.
• Access-Control-Allow-Headers: Tiêu đề này liệt kê các tiêu đề HTTP mà client được phép gửi trong yêu cầu, nhằm đảm bảo chỉ những tiêu đề được ủy quyền mới được chấp nhận.
• Access-Control-Allow-Credentials: Tiêu đề này cho biết liệu trình duyệt có được phép gửi thông tin xác thực (như cookie hoặc HTTP authentication) cùng với yêu cầu hay không.
• Access-Control-Expose-Headers: Tiêu đề này liệt kê các tiêu đề trong phản hồi mà mã JavaScript phía client có thể truy cập được.
• Access-Control-Max-Age: Tiêu đề này xác định khoảng 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 (preflight request) có thể được lưu vào bộ nhớ đệm, giúp giảm số lượng preflight request không cần thiết.

Về cơ bản, lỗi CORS xảy ra khi máy chủ không trả về các tiêu đề HTTP cần thiết trong phản hồi để xác nhận rằng yêu cầu từ một nguồn khác là hợp lệ. Sự thiếu sót hoặc cấu hình sai lệch này có thể xuất phát từ nhiều nguyên nhân khác nhau.

1. Cấu hình tiêu đề CORS không chính xác

Các tiêu đề trong một yêu cầu cross-origin hoạt động như một giấy phép để trình duyệt có thể truy cập tài nguyên. Khi các tiêu đề này không được máy chủ cấu hình một cách chính xác, hệ thống sẽ báo lỗi. Cụ thể, 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, trình duyệt sẽ ngay lập tức chặn phản hồi.

2. Nguồn gốc (Origin) không được phép

Mỗi khi gửi một yêu cầu cross-origin, trình duyệt sẽ đính kèm tiêu đề Origin để chỉ định nguồn gốc của yêu cầu đó. Phía máy chủ, sau khi nhận được yêu cầu, phải trả về tiêu đề Access-Control-Allow-Origin với một giá trị tương ứng. Nếu giá trị này không khớp chính xác với nguồn gốc của yêu cầu (bao gồm cả giao thức, tên miền và cổng) hoặc nếu máy chủ hoàn toàn không trả về tiêu đề này, trình duyệt sẽ từ chối yêu cầu và báo lỗi.

3. Phương thức HTTP hoặc tiêu đề không được phép

Lỗi CORS cũng có thể xảy ra nếu yêu cầu từ phía client sử dụng một phương thức HTTP (chẳng hạn như PUT hoặc DELETE) hoặc một tiêu đề HTTP tùy chỉnh mà máy chủ không cho phép. Tình huống này phát sinh khi phương thức hoặc tiêu đề đó không được liệt kê trong danh sách cho phép của các tiêu đề phản hồi Access-Control-Allow-Methods hoặc Access-Control-Allow-Headers từ máy chủ.

4. Yêu cầu kiểm tra trước thất bại

Đối với các yêu cầu phức tạp, trình duyệt sẽ tự động gửi một yêu cầu kiểm tra trước (preflight request). Yêu cầu này sử dụng phương thức OPTIONS để hỏi máy chủ xem yêu cầu chính sắp được gửi có được phép hay không. Nếu phản hồi của máy chủ cho yêu cầu preflight này không phù hợp, yêu cầu preflight sẽ bị coi là thất bại. Do đó, yêu cầu chính sẽ bị trình duyệt chặn lại ngay lập tức, dẫn đến lỗi CORS.

5. Thiếu hoặc không hợp lệ khóa API

Các khóa API là những mã bí mật thường được sử dụng để ủy quyền cho các ứng dụng web truy cập vào tài nguyên từ một máy chủ khác. Trong một số trường hợp, nếu khóa API bị thiếu hoặc không hợp lệ trong tiêu đề của yêu cầu, máy chủ có thể từ chối yêu cầu đó ngay từ đầu. Mặc dù nguyên nhân gốc là do xác thực không thành công, nhưng vì đây là một yêu cầu cross-origin bị từ chối, trình duyệt vẫn sẽ ghi nhận và báo cáo sự cố này dưới dạng một lỗi CORS.

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

Dưới đây là một số thông báo lỗi CORS mà các lập trình viên thường xuyên gặp phải nhất:

• No ‘Access-Control-Allow-Origin’ header is present on the requested resource: Lỗi này cho biết rằng máy chủ đã nhận và xử lý yêu cầu, nhưng trong phản hồi trả về lại hoàn toàn không có tiêu đề Access-Control-Allow-Origin. Do thiếu thông tin cho phép, trình duyệt không thể xác định yêu cầu có hợp lệ hay không và buộc phải chặn lại.
• The ‘Access-Control-Allow-Origin’ header has a value ‘…’ that is not equal to the supplied origin: Thông báo này xuất hiện 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 trang web gửi yêu cầu. Có nghĩa là máy chủ chỉ cho phép một số nguồn gốc cụ thể truy cập, và nguồn gốc của bạn không nằm trong danh sách đó.
• CORS policy – Method … is not allowed by Access-Control-Allow-Methods: Lỗi này thường xảy ra với các yêu cầu kiểm tra trước (preflight request), cho biết phương thức HTTP (ví dụ: PUT, DELETE) mà yêu cầu chính định sử dụng không được máy chủ cho phép. Nguyên nhân là do phương thức này không được liệt kê trong giá trị của tiêu đề Access-Control-Allow-Methods trong phản hồi từ máy chủ.
• CORS policy – Request header field … is not allowed by Access-Control-Allow-Headers: Lỗi này cũng liên quan đến preflight request, xảy ra khi yêu cầu chính có chứa một tiêu đề HTTP tùy chỉnh, nhưng tiêu đề đó không được máy chủ cho phép vì không được liệt kê trong giá trị của tiêu đề Access-Control-Allow-Headers.

Ví dụ về lỗi CORS thường gặp

Để dễ hình dung, hãy xem xét một kịch bản phổ biến sau:

• Một trang web đang chạy tại địa chỉ https://domain-a.com cần lấy dữ liệu từ một API được cung cấp tại https://domain-b.com thông qua một yêu cầu JavaScript (ví dụ: Fetch API).
• Khi yêu cầu được gửi đi, trình duyệt sẽ tự động đính kèm tiêu đề Origin: https://domain-a.com.
• Nếu máy chủ tại https://domain-b.com không được cấu hình để cho phép truy cập từ https://domain-a.com (tức là không bao gồm Access-Control-Allow-Origin: https://domain-a.com hoặc Access-Control-Allow-Origin: * trong phản hồi), trình duyệt sẽ chặn yêu cầu ngay khi nhận được phản hồi từ máy chủ.
• Lúc này, trong bảng điều khiển của trình duyệt, nhà phát triển sẽ thấy một thông báo lỗi tương tự như: Access to fetch at 'https://domain-b.com/api/data' from origin 'https://domain-a.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Đây chính là lỗi CORS policy điển hình mà các lập trình viên thường gặp phải khi gọi API đến một máy chủ mà thiếu hoặc có giá trị header Access-Control-Allow-Origin không hợp lệ.

Để khắc phục triệt để lỗi CORS, giải pháp cốt lõi và bền vững nhất là can thiệp và cấu hình trực tiếp ở phía máy chủ (server-side) để cho phép phía client có thể gọi và nhận dữ liệu một cách hợp lệ. Tuy nhiên, trong một số trường hợp, các giải pháp thay thế như sử dụng proxy hoặc các công cụ hỗ trợ phát triển cũng có thể được áp dụng.

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

• Đảm bảo các tiêu đề phản hồi chính xác:
  • Máy chủ phải trả về tiêu đề Access-Control-Allow-Origin với giá trị chính xác. Giá trị này có thể là tên miền cụ thể của website gửi yêu cầu (ví dụ: https://domain-a.com) để tăng cường bảo mật, hoặc có thể là ký tự đại diện * để cho phép tất cả các nguồn gốc.
  • Máy chủ cần xác định rõ ràng các phương thức HTTP được phép thông qua tiêu đề Access-Control-Allow-Methods (ví dụ: GET, POST, PUT, DELETE).
  • Nếu yêu cầu có chứa các tiêu đề tùy chỉnh, máy chủ phải cho phép các tiêu đề cần thiết thông qua Access-Control-Allow-Headers.
  • Trong trường hợp yêu cầu cần gửi kèm thông tin xác thực (credentials), máy chủ cần trả về tiêu đề Access-Control-Allow-Credentials với giá trị là true.
• Sử dụng thư viện và middleware: Để đơn giản hóa quá trình này, các nhà phát triển có thể sử dụng các thư viện hoặc middleware đã được xây dựng sẵn, ví dụ như thư viện cors trong môi trường Node.js với framework Express.js, giúp việc cấu hình trở nên nhanh chóng và ít sai sót hơn.
• Cảnh báo: Bạn cần hết sức cẩn trọng khi sử dụng giá trị * cho phép tất cả các nguồn gốc, vì cấu hình này có thể khiến máy chủ dễ bị tấn công Cross-Site Request Forgery (CSRF) nếu không có các biện pháp bảo vệ bổ sung.

2. Sử dụng máy chủ Proxy (Proxy Server)

Giải pháp này hoạt động hiệu quả dựa trên một nguyên tắc cơ bản: Chính sách Same-Origin Policy được thực thi bởi trình duyệt chứ không phải bởi máy chủ. Do đó, việc sử dụng một máy chủ proxy làm trung gian có thể giúp vượt qua rào cản này.

Máy chủ proxy sẽ đóng vai trò như một trạm trung chuyển. Thay vì gửi yêu cầu trực tiếp đến API từ xa, client sẽ gửi yêu cầu đến máy chủ proxy. Máy chủ proxy sau đó sẽ thực hiện yêu cầu đến API và trả lại phản hồi cho client. Khi nhận được phản hồi từ API từ xa, máy chủ proxy có thể thêm vào tiêu đề Access-Control-Allow-Origin: * còn thiếu trước khi trả kết quả về cho trình duyệt, giúp tránh được lỗi CORS.

Người dùng có thể tự xây dựng một máy chủ proxy riêng hoặc sử dụng các dịch vụ proxy công cộng như CORS Anywhere. Đối với các ứng dụng yêu cầu gọi API thường xuyên, việc xây dựng một proxy riêng là lựa chọn tốt hơn để đảm bảo tốc độ và sự ổn định.

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

Trong trường hợp 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 giao diện quản lý của các dịch vụ này để cho phép truy cập từ các nguồn gốc khác nhau.

4. Các giải pháp phía Client

• Tắt bảo mật trình duyệt: Lập trình viên có thể tạm thời vô hiệu hóa chính sách bảo mật của trình duyệt bằng cách sử dụng các cờ dòng lệnh khi khởi động để loại bỏ hoàn toàn các lỗi CORS trong quá trình phát triển cục bộ.
• Sử dụng tiện ích mở rộng trình duyệt: Bạn có thể cài đặt các tiện ích mở rộng như CORS Unblock. Khi được kích hoạt, các tiện ích này sẽ tự động thêm tiêu đề Access-Control-Allow-Origin: * vào mỗi phản hồi HTTP, giúp các yêu cầu cross-origin thành công. Tuy nhiên, giải pháp này chỉ có tác dụng trên chính máy tính đã cài đặt tiện ích.
• Điều chỉnh yêu cầu phía client: Đối với các yêu cầu đơn giản không cần preflight request, bạn hãy đảm bảo chỉ sử dụng các phương thức và tiêu đề chuẩn. Nếu API yêu cầu kiểm tra preflight, cần đảm bảo yêu cầu Fetch API của bạn tuân thủ các quy tắc của máy chủ về tiêu đề và mã thông báo ủy quyền.

Cách gỡ lỗi CORS thực tế

Để chẩn đoán và xử lý lỗi CORS một cách hiệu quả, các nhà phát triển nên tuân theo một quy trình gỡ lỗi logic bao gồm các bước sau:

• Bước 1: Kiểm tra bảng điều khiển trình duyệt (Console): Bạn hãy mở công cụ dành cho nhà phát triển và xem kỹ các thông báo lỗi trong tab Console. Thông báo lỗi thường sẽ chỉ rõ nguyên nhân cụ thể, chẳng hạn như thiếu tiêu đề Access-Control-Allow-Origin hay phương thức không được phép.
• Bước 2: Kiểm tra tài liệu API: Tham khảo tài liệu của API mà bạn đang cố gắng truy cập. Tài liệu này thường sẽ cung cấp thông tin chi tiết về việc CORS đã được bật hay chưa, các nguồn gốc nào được phép, và các tiêu đề hoặc phương thức nào được hỗ trợ.
• Bước 3: Kiểm tra tiêu đề phản hồi máy chủ: Trong tab Network của Developer Tools, hãy tìm yêu cầu bị lỗi và kiểm tra các tiêu đề phản hồi từ máy chủ. Cần đặc biệt chú ý đến tiêu đề Access-Control-Allow-Origin. Tiêu đề này phải tồn tại và giá trị của nó phải khớp chính xác với nguồn gốc của website bạn đang phát triển, hoặc là ký tự đại diện *.
• Bước 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à các lệnh gọi Fetch API hoặc XMLHttpRequest. Bạn hãy đảm bảo rằng bạn đang sử dụng các phương thức chuẩn (như GET, POST) và tránh sử dụng các tiêu đề tùy chỉnh không cần thiết nếu không được máy chủ cho phép.
• Bước 5: Đối chiếu yêu cầu Preflight: Nếu lỗi phát sinh từ một yêu cầu kiểm tra trước, hãy đảm bảo rằng yêu cầu của bạn tuân thủ các quy định của máy chủ, bao gồm việc đính kèm các tiêu đề được yêu cầu như mã thông báo ủy quyền nếu cần.

Công cụ phân tích CORS

• Công cụ dành cho nhà phát triển của trình duyệt: Các công cụ như Chrome DevTools hoặc Firefox Developer Tools là không thể thiếu. Tab Network cho phép bạn kiểm tra chi tiết từng yêu cầu và phản hồi, bao gồm cả tiêu đề, phương thức, và mã trạng thái.
• Postman: Là một công cụ mạnh mẽ để gửi các yêu cầu HTTP độc lập với trình duyệt. Việc sử dụng Postman giúp bạn xác định xem vấn đề nằm ở phía client hay phía server. Nếu một yêu cầu thành công trên Postman nhưng thất bại trên trình duyệt, thì gần như chắc chắn nguyên nhân là do chính sách CORS.
• Các tiện ích mở rộng trình duyệt: Các tiện ích như CORS Helper có thể cung cấp thêm thông tin phân tích và giúp đơn giản hóa quá trình gỡ lỗi trong một số trường hợp.

Tối ưu tốc độ website nhanh chóng, hiệu quả tại Vietnix

Dịch vụ tối ưu tốc độ website của Vietnix là một giải pháp chuyên nghiệp, được thiết kế để phân tích và xử lý triệt để các vấn đề gây chậm website, giúp doanh nghiệp của bạn khai thác tối đa tiềm năng kinh doanh trực tuyến.

Những lợi ích vượt trội khi sử dụng dịch vụ của Vietnix:

• Cải thiện trải nghiệm người dùng và tỷ lệ chuyển đổi: Một website tải nhanh giúp giữ chân khách truy cập, giảm đáng kể tỷ lệ thoát trang và trực tiếp thúc đẩy các hành động mua hàng hoặc liên hệ.
• Nâng cao thứ hạng SEO bền vững: Dịch vụ của Vietnix giúp website của bạn đáp ứng các tiêu chuẩn khắt khe về Core Web Vitals, tạo ra lợi thế cạnh tranh bền vững trên kết quả tìm kiếm.
• Tối ưu hóa chi phí quảng cáo: Khi trang đích tải nhanh, bạn sẽ giảm được tỷ lệ người dùng rời đi trước khi nội dung được hiển thị, qua đó nâng cao hiệu quả và lợi tức đầu tư (ROI) cho các chiến dịch quảng cáo trả phí.
• An tâm vận hành với chuyên gia: Đội ngũ chuyên gia của Vietnix sẽ thực hiện toàn bộ quy trình một cách an toàn và hiệu quả, giúp bạn tiết kiệm thời gian và tập trung vào hoạt động kinh doanh.

Thông tin liên hệ:

• Website: https://vietnix.vn/
• Hotline: 1800 1093
• Email: sales@vietnix.com.vn
• Địa chỉ: 265 Hồng Lạc, Phường Bảy Hiền, Thành Phố Hồ Chí Minh

Lỗi CORS về bản chất là một cơ chế bảo vệ người dùng của trình duyệt web, không phải là một lỗi của máy chủ. Việc hiểu rõ nguyên nhân và áp dụng các phương pháp khắc phục đúng đắn ở phía máy chủ là chìa khóa để giải quyết triệt để vấn đề này một cách an toàn và hiệu quả. Việc lựa chọn một nhà cung cấp hạ tầng linh hoạt và có đội ngũ hỗ trợ am hiểu kỹ thuật là yếu tố quan trọng giúp bạn giải quyết nhanh chóng các vấn đề tương tự và tập trung vào việc phát triển sản phẩm.