Question

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

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

但是，当使用XHR时，我没有收到不出现警告的标头，并且成功从api中获取了JSON。

我不太了解CORS，但是我的理解是，我所请求的api上没有标头，因此无法获取API。但是，假设API上没有标头，xhr如何能够获取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();

Answer 1

您需要为mode设置fetch选项。

来自docs：

// 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
}

Answer 2

什么触发了原始代码中的预检？

您添加的那些额外标题中的每一个

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

阻止获取时XMLHttpRequest成功

2 个答案: