Дозволити заголовок Access-Control-Allow-Origin за допомогою API завантаження HTML5

Я використовую API вибору 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)
});

Я можу використовувати звичайний json, але не можу отримати дані вище URL-адреси api. Це видає помилку:

API Fetch не може завантажити https://davidwalsh.name/demo/arsenal.json . На запитаному ресурсі немає заголовка 'Access-Control-Allow-Origin'. Отже, походження ' http: // localhost ' не має доступу. Якщо непрозора відповідь відповідає вашим потребам, встановіть режим запиту на "no-cors", щоб отримати ресурс із вимкненою системою CORS.

Як сказав epascarello, сервер, на якому розміщений ресурс, повинен мати ввімкнену CORS. Те, що ви можете зробити на стороні клієнта (і, мабуть, те, про що ви думаєте), - це встановити режим вибору на CORS (хоча це налаштування за замовчуванням, я вважаю):

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

Однак для цього все ще потрібно, щоб сервер також увімкнув CORS і дозволив вашому домену запитувати ресурс.

Ознайомтеся з документацією CORS та цим чудовим відео Udacity, що пояснює ту саму політику походження .

Ви також можете використовувати режим no-cors на стороні клієнта, але це просто дасть вам непрозору відповідь (ви не можете прочитати тіло, але відповідь все одно може бути кешована службовцем або споживатися деякими API, наприклад <img>) :

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

У мене був інтерфейсний код, який працював у http: // localhost: 3000, а мій API (кодовий код) працював на http: // localhost: 5000

Використовував API вибору для виклику API. Спочатку це була мета "помилки". Потім додав цей наведений нижче код до мого коду Backend API, дозволяючи початок та заголовок з будь-якого місця.

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

Однак слід обмежити своє походження у випадку інших середовищ, таких як stage, prod.

Це працювало для мене:

npm install -g local-cors-proxy

Кінцева точка API, яку ми хочемо запитати, яка має проблеми з CORS:

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

Запустити проксі:

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

 Proxy Active 

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

Потім у вашому клієнтському коді нова кінцева точка API:

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

Кінцевим результатом буде запит на https://www.yourdomain.ie/test/list без проблем CORS!

Я знаю, що це старіша публікація, але я виявив, що мені вдалося виправити цю помилку, використовуючи IP-адресу мого сервера, а не доменне ім’я в моєму запиті на отримання. Так наприклад:

#(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)
});

Якщо ви використовуєте nginx, спробуйте це

#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;
    }

Перегляньте https://expressjs.com/en/resources/middleware/cors.html Ви повинні використовувати cors.

Встановити:

$ npm install cors

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

Ви повинні помістити цей код на свій сервер вузлів.