Access-Control-Allow-Origin标头出现在请求的资源上[重复]

Question

这个问题在这里已有答案：

• How does Access-Control-Allow-Origin header work? 13个答案

我正在使用的例子API来获取数据。一切都很好，但我在我的控制台得到了一些警告。

  axios.get(url).then(res =>
    dispatch({
      type: GET_STOCK,
      payload: {
        tag,
        page: page + 1,
        images: res.data.hits
      }
    })
  );

警告是

从'https://pixabay.com/api/?key=my_key_is_here'访问'http://localhost:8000'的XMLHttpRequest已被CORS策略阻止：请求的资源上没有'Access-Control-Allow-Origin'标头。

我试图在axios功能中设置标题和一些选项。

Answer 1

如果允许CORS访问。无需特殊请求标头。我成功从localhost访问了API。

Answer 2

export const getStock = (tag, page) => dispatch => {
      let url = null;

      if (tag) {
        url = `https://pixabay.com/api/?key=my_key=${tag}&per_page=${32 *
          (page + 1)}&image_type=photo`;
      } else {
        url = `https://pixabay.com/api/?key=my_key&per_page=${32 *
          (page + 1)}&image_type=photo`;
      }

      axios.get(url).then(res =>
        dispatch({
          type: GET_STOCK,
          payload: {
            tag,
            page: page + 1,
            images: res.data.hits
          }
        })
      );
    };

有趣的是，我将onScrol事件添加到包含此图像的Component。当组件安装时一切都很好，但是当我滚动以获取更多图像时，我得到此警告

这是一个代码

onScroll = e => {
    let finish = e.target.scrollTop + e.target.offsetHeight || 0;
    let height = this.stockRef.current.offsetHeight * 0.4;

    const {
      stock: { page, tag },
      getStock
    } = this.props;

    if (finish >= height && page <= 4) {
      getStock(tag, page);
    }
  };  

对不起，如果我做了一些打字错误