Làm cách nào để bật CORS trong JavaScript?

Nếu bạn chưa quen với JavaScript hoặc lập trình web nói chung, bạn sẽ không thể tránh khỏi một thứ gọi là lỗi CORS, nếu chưa

Đến cuối hướng dẫn ngắn này, bạn sẽ hiểu rõ hơn về

• Hiểu CORS là gì
• Tại sao xảy ra lỗi CORS

Tìm một số cách khắc phục lỗi CORS

• Kích hoạt CORS
• Thực hiện yêu cầu HTTP từ máy chủ
• Sử dụng máy chủ proxy

Giả sử bạn đang thực hiện một yêu cầu HTTP từ ứng dụng khách thông qua AJAX tới API của bên thứ ba hoặc API của riêng bạn nhưng từ một máy chủ tên miền khác như máy chủ bên dưới

var xhttp = new XMLHttpRequest[];
xhttp.onreadystatechange = function [] {
  if [this.readyState == 4 && this.status == 200] {
    console.log[xhttp.responseText];
  } else {
    console.log["error"]
  }
};
xhttp.open["GET", "//maps.googleapis.com/maps/api/place/details/json?place_id=ChIJryijc9s0K4gRG9aU7SDTXdA&key=[YOURAPIKEY]", true];
xhttp.send[];

Bạn có thể sẽ gặp lỗi CORS khó chịu này

Lỗi nói…

Trình duyệt đang chặn và phàn nàn rằng đối tượng phản hồi đầu ra đến từ API Google Địa điểm không có "tiêu đề phù hợp" để cho phép trình duyệt lấy dữ liệu từ một miền khác

Theo mặc định, các trình duyệt sẽ chỉ cho phép giao tiếp giữa máy khách và máy chủ miễn là chúng nằm trong cùng một miền

Đó là thứ được gọi là Chính sách xuất xứ giống nhau và nó được bật trong trình duyệt theo mặc định vì lý do bảo mật

Nhưng nếu bạn nhập cùng một URL API với các tham số truy vấn hợp lệ vào thanh địa chỉ của trình duyệt, chúng tôi sẽ lấy lại dữ liệu và không có lỗi

Đây là lý do tại sao

Khi bạn đang nhập URL API của Google trên thanh địa chỉ, bạn đang gửi một yêu cầu từ máy chủ Google có cùng tên miền mà bạn sẽ nhận được phản hồi từ đó

Đó là Chính sách xuất xứ giống nhau và nó sẽ hoạt động

Nhưng câu hỏi thực sự là…

Làm cách nào bạn có thể thực hiện yêu cầu qua AJAX tới một miền khác với ứng dụng khách mà không gặp lỗi CORS?

Trước khi tìm ra giải pháp…

CORS là viết tắt của Chia sẻ tài nguyên nguồn gốc chéo

Đó là một cơ chế bảo mật cho phép mọi khách hàng sử dụng dữ liệu từ bất kỳ miền nào

Hầu hết các nhà cung cấp dịch vụ API sẽ bật CORS trong đối tượng phản hồi của họ vì chúng được sử dụng bởi các miền khác nhau

Nhưng không phải trong mọi trường hợp

Hãy xem cách khắc phục lỗi CORS

Giả sử bạn có ứng dụng phía máy khách và API phía máy chủ ở hai miền khác nhau do bạn quản lý

Bạn chỉ có thể bật CORS bằng cách thêm tiêu đề sau vào đối tượng phản hồi trên API phía máy chủ [KHÔNG CÓ TRONG KHÁCH HÀNG] để cho trình duyệt biết rằng bạn đã bật CORS

Trong ví dụ dưới đây, tôi đã thêm mã bên trong phần mềm trung gian vào đối tượng phản hồi trong nút. js

app.use[function[req, res, next] {
  res.header["Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"]; // update to match the domain you will make the request from
  res.header["Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"];
  next[];
}];

Và mọi thứ sẽ hoạt động tốt

Nhưng mà…

Điều gì sẽ xảy ra nếu tôi đang cố lấy dữ liệu từ API của bên thứ ba như API Google Địa điểm mà tôi không có quyền truy cập để bật CORS?

Trong trường hợp đó, bạn có thể thực hiện yêu cầu HTTP từ máy chủ của riêng mình thay vì máy khách

Điều này là do Chính sách xuất xứ giống nhau không được áp dụng khi giao tiếp giữa máy chủ với máy chủ đang diễn ra

Thay vì sử dụng máy chủ của riêng bạn, bạn có thể sử dụng máy chủ proxy từ máy khách tạo Yêu cầu HTTP

//cors-anywhere.herokuapp.com/

Tất cả những gì bạn phải làm là thêm liên kết máy chủ proxy vào URL

var xhttp = new XMLHttpRequest[];
xhttp.onreadystatechange = function[] {
        console.log[xhttp.responseText]
    if [this.readyState == 4 && this.status == 200] {
       // Typical action to be performed when the document is ready:
       document.getElementById["demo"].innerHTML = xhttp.responseText;
    } else {
      console.log["error"]
    }
};
xhttp.open["GET", "//cors-anywhere.herokuapp.com///maps.googleapis.com/maps/api/place/details/json?place_id=ChIJryijc9s0K4gRG9aU7SDTXdA&key=[YOURAPIKEY]", true];
xhttp.send[];

Và mã mẫu ở trên sẽ hoạt động tốt. 😀

Bây giờ, bạn đã hiểu rõ hơn về lý do xảy ra lỗi CORS và cách trình duyệt hoạt động

Mình cũng hướng dẫn các bạn fix lỗi CORS để khi gặp lỗi CORS các bạn khỏi hoang mang như mình đã từng

Tôi hy vọng nó sẽ giúp

Nếu bạn có bất kỳ câu hỏi nào hoặc nếu bất cứ điều gì không rõ ràng, vui lòng liên hệ với tôi bằng cách chỉ cần bình luận bên dưới

Làm cách nào để sử dụng CORS trong JavaScript?

CORS có áp dụng cho JavaScript không?

Làm cách nào để kích hoạt cấu hình CORS?

Làm cách nào để sửa lỗi chính sách CORS trong JavaScript?