api在axios中被阻止答案

【问题标题】：api blocked in axiosapi在axios中被阻止
【发布时间】：2021-10-21 18:15:16
【问题描述】：

我正在使用 Redux thunk 从 https://api.rawg.io/api/games 获取数据到我的 React 项目中当我从特定 id 获取数据时，我正常取回数据我从源 'http://localhost:3001' 收到此错误已被阻止CORS 政策。

import axios from "axios";
import { gameDetailsURL, gameScreenshotURL } from "../api";

export const loadDetail = (id) => async (dispatch) => {
  const detailData = await axios.get(gameDetailsURL(id));
  const screenShot = await axios.get(gameScreenshotURL(id));
  dispatch({
    type: "GET_DETAIL",
    payload: {
      detail: detailData.data,
      screen: screenShot.data,
    },
  });
};

【问题讨论】：

标签： javascript reactjs api redux

【解决方案1】：

如果 API 未配置正确的 CORS 设置，并且它不是您的 API，则其中一种解决方案是使用配置为处理具有正确 CORS 标头的请求的代理。

看起来像这样：

您可以配置自己的代理，也可以像这样使用现成的代理（请注意，此代理的作者要求不要过度使用，所以如果它是一个大型应用程序，您应该自己设置）：

https://thingproxy.freeboard.io/fetch/https://api.rawg.io/api/games

【讨论】：

【解决方案2】：

当您调用具有不同域名的服务器时会发生这种情况。

什么是 CORS？ https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

临时解决方案是在浏览器上使用 CORS 阻止程序扩展

例如：https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

【讨论】：