XMLHttpRequest успешно, пока выборка заблокирована - PullRequest
Новая
       18

XMLHttpRequest успешно, пока выборка заблокирована

0 голосов
/ 05 октября 2018

Я пытаюсь получить доступ к API из внешнего интерфейса, и я пробовал запросы xhr и fetch api.

При использовании fetch я получил сообщение об ошибке «Ответ на запрос перед полетом не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок« Access-Control-Allow-Origin ». Origin 'Поэтому http://127.0.0.1:5500' не разрешен доступ. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса 'no-cors', чтобы получить ресурс с отключенным CORS. "

Однако при использовании XHR я выполняюне получает заголовки, не выводящие предупреждение, и он успешно извлекает JSON из API.

Я не совсем понимаю CORS, но, насколько я понимаю, на API-интерфейсе, который я запрашивал, не было заголовка, и поэтому я не смог получить API.НО, как xhr смог получить API с предполагаемым отсутствием заголовков в API?Как был возможен запрос в XMLHTTPRequest, но не запрос извлечения?Как бы я использовал fetch для получения этого API?Для справки я включил ниже свой код извлечения и код XHR.

Код извлечения: 

fetch(requestURL, { 
    headers: {
        "Content-Type": "application/json",
        'Authorisation': 'Basic' + apiKeySecured,
        "Access-Control-Allow-Origin": "*", // Required for CORS support to work
        "Access-Control-Allow-Credentials": false,
        "api-key": apiKeySecured,
    }
}).then(function (response) {
    return response.json();
})
    .then(function (myJson) {
        console.log(JSON.stringify(myJson));
    })
    .catch(error => console.error(error));

Код XHR: 

var xhr = new XMLHttpRequest();
xhr.withCredentials = false;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
    }
});

xhr.open("GET", requestURL);
xhr.setRequestHeader(`api-key`, apiKeySecured);

xhr.send();

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Что вызывает предполёт в вашем исходном коде?

Каждый из этих дополнительных заголовков, которые вы добавили 

"Content-Type": "application/json",
'Authorisation': 'Basic' + apiKeySecured,
"Access-Control-Allow-Origin": "*", // Required for CORS support to work
"Access-Control-Allow-Credentials": false,

Ни один из них не был добавлен в XHR, так чтоне добавляйте его в выборку

Ваша выборка должна быть 

fetch(requestURL, { 
    headers: {
        // remove all those random headers you added
        "api-key": apiKeySecured
    },
    mode: 'cors' // add this 
}).then(response => response.json())
.then(function (myJson) {
    console.log(JSON.stringify(myJson));
})
.catch(error => console.error(error));

Теперь она эквивалентна вашему XHR-коду

0 голосов
/ 05 октября 2018

Вам необходимо установить параметр mode для fetch.

Из документов : 

// Example POST method implementation:

postData(`http://example.com/answer`, {answer: 42})
  .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
  .catch(error => console.error(error));

function postData(url = ``, data = {}) {
  // Default options are marked with *
    return fetch(url, {
        method: "POST", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, same-origin, *omit
        headers: {
            "Content-Type": "application/json; charset=utf-8",
            // "Content-Type": "application/x-www-form-urlencoded",
        },
        redirect: "follow", // manual, *follow, error
        referrer: "no-referrer", // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses response to JSON
}
...