0

我正在尝试从前端访问 API，并且我尝试了 xhr 和 fetch api 请求。

使用 fetch 时，我收到错误“对预检请求的响应未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。来源' http://127.0.0.1:5500 ' 因此不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为 'no-cors' 以获取禁用 CORS 的资源。

但是，在使用 XHR 时，我没有收到 headers not present 警告，它成功地从 api 获取 JSON。

我不太了解 CORS，但我的理解是我请求的 api 上没有标头，因此无法获取 API。但是，xhr 是如何在 API 上假定缺少标头的情况下获取 api 的？XMLHTTPRequest 中的请求如何可能而不是 fetch 请求中的请求？我将如何使用 fetch 来获取此 API？我在下面包含了我的 fetch 和 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();
4

2 回答 2

0

您需要为 设置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
}
于 2018-10-05T02:29:10.993 回答
0

是什么触发了原始代码中的预飞行？

您添加的每一个额外标题

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

这些都没有添加到 XHR，所以不要将它添加到 fetch

你的 fetch 应该是

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 代码

于 2018-10-05T02:38:31.497 回答