Chính sách CORS trong các yêu cầu AJAX bằng JavaScript

Không thể tùy tiện thực hiện các yêu cầu AJAX đến các trang web khác (cross-origin requests). Các yêu cầu như vậy được quản lý bởi chính sách CORS. Nói ngắn gọn, theo chính sách này, trang web mà bạn gửi yêu cầu đến phải đồng ý phản hồi nó. Để làm được điều này, nó phải trả về các tiêu đề HTTP tương ứng.

Hãy thử nghiệm trong thực tế. Hãy khởi chạy hai máy chủ thử nghiệm trên các cổng khác nhau. Máy chủ thứ nhất trên cổng 3001, và máy chủ thứ hai trên cổng 3002. Hãy thử gửi một yêu cầu AJAX từ trang web thứ hai đến trang web thứ nhất.

Giả sử trang web thứ nhất sẵn sàng nhận các yêu cầu sau:

export default {
	'/handler/': function({ body }) {
		console.log(body);
		return 'success';
	}
}

Hãy gửi một yêu cầu từ trang web thứ hai đến trang web thứ nhất:

button.addEventListener('click', function() {
	let promise = fetch('http://localhost:3001/handler/', {
		method: 'post',
		body: JSON.stringify([1, 2, 3, 4, 5]),
		headers: {
			'Content-Type': 'application/json',
		},
	});
});

Kết quả là yêu cầu sẽ không thực hiện được, và trong bảng điều khiển trình duyệt, chúng ta sẽ thấy lỗi liên quan đến chính sách CORS.

Để yêu cầu được thực hiện, máy chủ thứ nhất phải trả về các tiêu đề HTTP đặc biệt. Hãy chỉ định chúng - và yêu cầu từ trang web thứ hai sẽ bắt đầu được gửi đến trang web thứ nhất:

export default {
	'/handler/': function({ body, resp }) {
		resp.setHeader('Access-Control-Allow-Origin', '*');
		resp.setHeader('Access-Control-Allow-Headers', '*');
		
		console.log(body);
		return 'success';
	}
}