2 sai lầm phổ biến về CORS (Cross-Site Resource Sharing) bạn nên biết

Chắc hẳn anh em developer frontend hay backend ở mức fresher hay thậm chí đã đang làm việc có lẽ trong cuộc đời đã từng gặp phải một cái lỗi ở console hiện lên đỏ lè khi gọi lên API với nội dung dạng như sau:

Đây gọi là lỗi CORS (Cross-Site Resource Sharing).Lúc này nếu anh em sẽ lập tức search ngay từ khoá trên và một loạt kết quả trên stackoverflow sẽ trả về tha hồ mà fix.Tuy nhiên cá nhân mình và cũng như trên các group thấy rằng có 2 sai lầm phổ biến khiến mọi người hiểu sai về thằng Cors này và trong bài viết này mình sẽ đề cập đến 2 vấn đề đó (nói nhỏ là bản thân mình cũng từng bị nhầm lẫn cái này).

Mục lục

1. CORS là gì và để làm gì?
2. 2 sai lầm khi hiểu về CORS
   1. 1.Khắc phục CORS ở phía client-side
   2. 2.Cors sẽ giúp bảo vệ các API không cho truy cập

CORS là gì và để làm gì?

CORS viết tắt của cụm từ Cross-Origin Resource Sharing, là một khái niệm bảo mật được trang bị trên các trình duyệt hiện đai ngày nay như: Chrome, Firefox...Nó sinh ra chỉ với một công dụng đơn giản là một cơ chế bảo mật để hạn chế việc truy cập tài nguyên từ máy chủ này đến một máy chủ khác.

Tuy nhiên trong 1 số trường hợp bạn thấy chúng truy cập cùng một domain (origin) nhưng cũng bị chặn bởi cors thì nguyên nhân là có thể nó khác port, hostnames (domain.com), schemes(http/https).

Xem thêm tại đây:https://developer.mozilla.org/en-US/docs/Glossary/Origin

Hiện nay thì khi xây dựng một ứng dụng web đa phần các dev đều thiết kế phần frontend và backend ở trên 2 server khác nhau, 2 tên miền khác nhau chính vì vậy phải thiết lập cross-origin access để 2 bên có thể giao tiếp với nhau mà không phải sinh ra cái lỗi ở phía trên nữa.

Và chi tiết hơn về cors mình sẽ đề cập ở bài viết sau, phần này mình chỉ giới thiệu qua để làm nền móng nói đến 2 sai lầm mà anh em thường làm bên dưới đây.

2 sai lầm khi hiểu về CORS

Bản thân mình khi lần đầu bị lỗi CORS là thực hiện gọi API từ React lên server Nodejs, với cái lỗi đỏ mà vô lí là thử ở Postman thì goi api thành công nhưng gọi từ frontend là lỗi và mình đã fix nó với những sai lầm như sau:

1.Khắc phục CORS ở phía client-side

Đây là một lỗi rất là phổ biến luôn nguyên nhân là anh em khi search các khắc phục lỗi cors trên react hay bất cứ framework frontend nào thì sẽ thấy trên stackoverflow bảo thêm vào 3 dòng này trong header trước khi gọi ajax (axios, fetch) lên server:

headers: {
   'Access-Control-Allow-Origin': '*',
   'Access-Control-Allow-Methods': 'POST, GET',
   'Access-Control-Allow-Headers': 'Content-Type',
}

Cách này sẽ không hoạt động và cũng không đúng với nguyên tắc mà cors nó sinh ra.Như đã đề cập ở trên thì cors nó được gửi từ phía backend bằng cách gắn vào response vì vậy phía client sẽ không can thiệp gì được bằng config trên, và nếu có làm thì phía server sẽ làm điều này.

2.Cors sẽ giúp bảo vệ các API không cho truy cập

Nếu bạn nghĩ việc thiết lập cors ở phía server sẽ giúp bạn cấm người khác truy cập vào các api cần bảo vệ thì cũng hoàn toàn sai. Khi chúng ta gửi một request tới 1 api nào đó thì khi server phản hồi lại tại response sẽ chứa Access-Control-Allow-Origin header, trình duyệt sẽ so sánh value của Access-Control-Allow-Origin có trùng với origin được gửi trước đó lên không, nếu không trùng thì sẽ gây ra lỗi và không trả lại dữ liệu. Và đó cũng là câu trả lời cho những bạn nào đang thắc mắc rằng ủa tại sao em sử dụng Postman gọi lên API thì không báo lỗi còn ở phía frontend như React, Vue, Angular... thì lại bị lỗi code.Postman không phải là trình duyệt, nó là ứng dụng nên không quan tâm đến việc có trùng origin hay không.

Vì vậy, CORS chỉ là một khái niệm hoạt động trên trình duyệt và không phải là một cơ chế bảo mật mạnh mẽ.