HTML - Hướng dẫn CORS cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của CORS. Đừng lo lắng nếu bạn chưa từng nghe về nó trước đây - vào cuối bài hướng dẫn này, bạn sẽ trở thành một chuyên gia CORS! Hãy chuẩn bị đồ uống yêu thích của bạn, ngồi thoải mái, và cùng tôi bước vào!

HTML - Web CORS

CORS là gì?

CORS là viết tắt của Cross-Origin Resource Sharing. Tôi biết rằng听起来 có vẻ phức tạp, nhưng hãy để tôi giải thích cho bạn bằng một ví dụ thú vị.

Hãy tưởng tượng bạn đang ở một nhà hàng sang trọng (đó là trình duyệt web của bạn), và bạn muốn đặt món ăn từ một nhà hàng khác ở đối diện (đó là một trang web khác). Thường thì nhà hàng sang trọng sẽ không cho phép điều này vì họ muốn bạn chỉ ăn đồ của họ. Nhưng với CORS, nó giống như nhà hàng sang trọng nói: "Được rồi, hãy đi đặt món từ nhà hàng đối diện!" Đây là cách để trình duyệt web an toàn cho phép các trang web yêu cầu tài nguyên từ các trang web khác.

Tại sao chúng ta cần CORS?

Trong những ngày đầu của internet, các trình duyệt có một chính sách an ninh nghiêm ngặt gọi là Same-Origin Policy. Chính sách này ngăn không cho các trang web gửi yêu cầu đến các domain khác, điều này rất tốt cho an ninh nhưng không tốt cho tính năng năng.

Khi internet phát triển, các nhà phát triển cần một cách để gửi yêu cầu cross-origin một cách an toàn. Đó là khi CORS ra đời, cung cấp một phương pháp an toàn cho các máy chủ để nới lỏng Same-Origin Policy và cho phép một số yêu cầu cross-origin.

CORS hoạt động như thế nào?

CORS hoạt động thông qua một series các header HTTP. Khi một trang web gửi yêu cầu đến một domain khác, trình duyệt thêm một header đặc biệt gọi là Origin vào yêu cầu. Máy chủ sau đó trả lời với các header cho biết liệu yêu cầu có được phép hay không.

Hãy xem một ví dụ đơn giản:

<!DOCTYPE html>
<html>
<head>
<title>Ví dụ CORS</title>
</head>
<body>
<h1>CORS trong hành động</h1>
<button onclick="makeRequest()">Gửi yêu cầu</button>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>

Trong ví dụ này, khi bạn nhấn vào nút, nó sẽ cố gắng lấy dữ liệu từ https://api.example.com/data. Nếu máy chủ tại api.example.com đã cấu hình CORS đúng cách, nó sẽ bao gồm các header trong phản hồi cho phép trang web của bạn truy cập dữ liệu.

Gửi yêu cầu CORS

Bây giờ, hãy sâu hơn vào cách gửi yêu cầu CORS. Chúng ta sẽ sử dụng Fetch API, một cách hiện đại và mạnh mẽ để gửi yêu cầu mạng trong JavaScript.

fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Mã này gửi một yêu cầu GET đến https://api.example.com/data. Phản hồi của máy chủ sẽ quyết định liệu yêu cầu có thành công hay không.

Nếu CORS được cấu hình đúng trên máy chủ, bạn sẽ thấy dữ liệu được ghi vào console. Nếu không, bạn sẽ gặp lỗi CORS, có thể trông giống như này:

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

Đừng lo lắng nếu bạn thấy lỗi này! Nó chỉ có nghĩa là máy chủ không được cấu hình để cho phép yêu cầu từ trang web của bạn.

Xử lý sự kiện trong CORS

Khi làm việc với CORS, việc xử lý cả phản hồi thành công và lỗi là rất quan trọng. Hãy sửa đổi ví dụ trước để bao gồm các bộ xử lý sự kiện:

<!DOCTYPE html>
<html>
<head>
<title>CORS với bộ xử lý sự kiện</title>
</head>
<body>
<h1>CORS với bộ xử lý sự kiện</h1>
<button onclick="makeRequest()">Gửi yêu cầu</button>
<div id="result"></div>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
document.getElementById('result').textContent = JSON.stringify(data);
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').textContent = 'An error occurred: ' + error.message;
});
}
</script>
</body>
</html>

Trong ví dụ này, chúng ta đã thêm các bộ xử lý sự kiện cho cả phản hồi thành công và lỗi. Nếu yêu cầu thành công, chúng ta hiển thị dữ liệu trên trang. Nếu có lỗi, chúng ta hiển thị thông báo lỗi.

Phương thức CORS

CORS hỗ trợ nhiều phương thức HTTP. Dưới đây là bảng tóm tắt các phương thức phổ biến nhất:

Phương thức	Mô tả
GET	Lấy dữ liệu từ máy chủ
POST	Gửi dữ liệu để tạo một tài nguyên mới trên máy chủ
PUT	Gửi dữ liệu để cập nhật một tài nguyên hiện có trên máy chủ
DELETE	Yêu cầu xóa một tài nguyên trên máy chủ
HEAD	Tương tự như GET, nhưng chỉ lấy header, không lấy nội dung
OPTIONS	Sử dụng để mô tả các tùy chọn giao tiếp cho tài nguyên mục tiêu

Lưu ý, máy chủ phải được cấu hình để cho phép các phương thức này cho các yêu cầu CORS.

Kết luận

Chúc mừng! Bạn đã chính thức bước vào thế giới của CORS. Chúng ta đã tìm hiểu CORS là gì, tại sao nó cần thiết, và cách gửi các yêu cầu CORS cơ bản. Nhớ rằng CORS là về việc làm cho web trở nên liên kết hơn trong khi vẫn duy trì an ninh.

Trong hành trình phát triển web của bạn, bạn sẽ gặp CORS trong nhiều tình huống khác nhau. Đừng sợ những lỗi CORS - chúng chỉ là cơ hội để học thêm về cách internet hoạt động!

Tiếp tục luyện tập, giữ vững sự tò mò, và chúc bạn viết mã vui vẻ!

Credits: Image by storyset