Question

我有一个示例提取API，程序：

const display = document.getElementById("display");
const btn = document.getElementById("btn");
    btn.addEventListener("click", getData)


 function createNode(element) {
      return document.createElement(element);
  }

  function append(parent, el) {
    return parent.appendChild(el);
  }


function getData(){
  const ul = document.getElementById('authors');
  const url = 'https://randomuser.me/api/?results=10';
  fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    let authors = data.results;
    return authors.map(function(author) {
      let li = createNode('li'),
          img = createNode('img'),
          span = createNode('span');
      img.src = author.picture.medium;
      span.innerHTML = `${author.name.first} ${author.name.last}`;
      append(li, img);
      append(li, span);
      append(ul, li);
    })
  })
  .catch(function(error) {
    console.log(error);
  });   
}

每当我单击按钮元素触发getData事件时，我都会在控制台中收到以下错误。

GET https://randomuser.me/api/?results=10 net::ERR_SSL_VERSION_INTERFERENCE
index.html:53 TypeError: Failed to fetch

是因为CORS相关问题，还是我的代码有错误？

Answer 1

在发送实际请求之前，请检查您的api是否为OPTIONS请求返回有效的CORS标头。

响应应包含以下标头

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET,DELETE,PUT

您可以从mozilla文档中了解有关CORS的更多信息-https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Fetch API无法通过CORS chrome扩展名提取（类型错误）

1 个答案: