Pixabay API CORB问题

Question

当我试图从我的Javascript (React)应用程序中访问Pixabay api时，我得到了跨域读取阻止(CORB)。

​

​

下面是我的抓取代码：

fetch(`https://pixabay.com/api/?key=${API_KEY}&q=travel&image_type=photo&pretty=true`)
  .then(res => res.json())
  .then(
    result => {
      console.log(result);
      // set url array in state to be used by a gallery component..
    },
    error => {
      console.log(error);
    }
  );

fetch可以很好地返回数据，但是在一个简单的img标记中使用的每个单独的图像urls都会抛出一个CORB错误。

我需要做什么来解除对我的请求的阻止？

Answer 1

我猜你正在使用Pixabay网站的链接作为你的图片的src (hit.pageURL)。你不是想用hit.previewURL吗？

const API_KEY = '123456789abcdef';

fetch(`https://pixabay.com/api/?key=${API_KEY}&q=travel&image_type=photo&pretty=true`)
  .then(res => res.json())
  .then(
    result => {
      // Just for the demo
      const html = result.hits.map(
        hit => `<a href="${hit.pageURL}"><img src="${hit.previewURL}"></a>`
      ).join('');
      document.body.innerHTML = html;
    },
    error => {
      console.log(error);
    }
  );