Cho phép tiêu đề Access-Control-Allow-Origin bằng cách sử dụng API tìm nạp HTML5

Tôi đang sử dụng API tìm nạp HTML5.

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Tôi có thể sử dụng json bình thường nhưng không thể tìm nạp dữ liệu của url api ở trên. Nó ném ra lỗi:

API tìm nạp không thể tải https://davidwalsh.name/demo/arsenal.json . Không có tiêu đề 'Access-Control-Allow-Origin' có trên tài nguyên được yêu cầu. Nguồn gốc ' http: // localhost ' do đó không được phép truy cập. Nếu phản hồi không rõ ràng phục vụ nhu cầu của bạn, hãy đặt chế độ của yêu cầu thành 'no-cors' để tìm nạp tài nguyên khi CORS bị vô hiệu hóa.

Giống như epascarello đã nói, máy chủ lưu trữ tài nguyên cần phải kích hoạt CORS. Những gì bạn có thể làm ở phía máy khách (và có thể là những gì bạn đang nghĩ đến) là đặt chế độ tìm nạp thành CORS (mặc dù tôi tin rằng đây là cài đặt mặc định):

fetch(request, {mode: 'cors'});

Tuy nhiên, điều này vẫn yêu cầu máy chủ bật CORS và cho phép miền của bạn yêu cầu tài nguyên.

Xem tài liệu CORS và video Udacity tuyệt vời này giải thích Chính sách Nguồn gốc Giống nhau .

Bạn cũng có thể sử dụng chế độ no-cors ở phía máy khách, nhưng điều này sẽ chỉ cung cấp cho bạn một phản hồi không rõ ràng (bạn không thể đọc nội dung, nhưng phản hồi vẫn có thể được lưu trữ bởi nhân viên dịch vụ hoặc được sử dụng bởi một số API, chẳng hạn như <img>) :

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});

Tôi đã có mã giao diện người dùng của mình chạy trong http: // localhost: 3000 và API (mã phụ trợ) của tôi đang chạy tại http: // localhost: 5000

Đang sử dụng API tìm nạp để gọi API. Ban đầu, nó là lỗi "cors". Sau đó, thêm mã bên dưới này vào mã API phụ trợ của tôi, cho phép nguồn gốc và tiêu đề từ bất kỳ đâu.

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

Tuy nhiên, bạn nên hạn chế nguồn gốc của bạn trong trường hợp các môi trường khác như sân khấu, sản phẩm.

Điều này đã làm việc cho tôi:

npm install -g local-cors-proxy

Điểm cuối API mà chúng tôi muốn yêu cầu có vấn đề về CORS:

https://www.yourdomain.com/test/list

Khởi động Proxy:

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

Sau đó, trong mã khách hàng của bạn, điểm cuối API mới:

http://localhost:8010/proxy/test/list

Kết quả cuối cùng sẽ là một yêu cầu đến https://www.yourdomain.ie/test/list mà không có vấn đề CORS!

Tôi biết đây là một bài đăng cũ hơn, nhưng tôi nhận thấy điều phù hợp để tôi khắc phục lỗi này là sử dụng địa chỉ IP của máy chủ của tôi thay vì sử dụng tên miền trong yêu cầu tìm nạp của tôi. Ví dụ:

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Nếu bạn đang sử dụng nginx, hãy thử cái này

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }

Hãy xem https://expressjs.com/en/resources/middleware/cors.html Bạn phải sử dụng cors.

Tải về:

$ npm install cors

const cors = require('cors');
app.use(cors());

Bạn phải đặt mã này vào máy chủ nút của mình.