Cùng tìm hiểu về CORS Policy của trình duyệt. Cấu tạo và cách cấu hình cho nó.

URL Origin = schema(giao thức) + domain + port

Lỗi CORS xuất hiện khi call request khác URL Origin(URL gốc), chỉ xảy ra khi call qua trình duyệt, vd call từ postman hay 1 webserver trung gian để lấy data về thì ko bị lỗi này.

Khi gọi request mà target khác URL origin, vd localhost:3000 frontend call api tới server localhost:8888 do khác URL origin nên trình duyệt sẽ raise CORS, để fix case này chỉ cần set lại cấu hình như sau

Access-Control-Allow-Origin: '*' 

“*” ở đây có nghĩa là chấp nhận request gọi tới từ nhiều URL origin, domain port khác nhau, thông thường set là “*” khi request gọi tới không cần đính kèm cookie.

Khi thực hiện authenticate, server cần set cookie và trả về client, do khác URL origin và hành động set cookie, đính kèm cookie là hành động nhạy cảm, cần yếu tố bảo mật cao nên lúc này sẽ raise lỗi CORS ở phía trình duyệt, để fix case này, ta cần cấu hình lại như sau:

// Client call api
fetch('api/auth/login', {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json'
	},
  // mục đích để đính kèm cookie khi call api
	credentials: 'includes' // withCredentials: true,
	body: JSON.stringify(fields)
})

// Server middleware
Access-Control-Allow-Origin: 'http://localhost:3000' # ko được để '*'
credentials: true