javascript - igdb.com API | React Axios 请求被 CORS 策略阻止；请求的资源上不存在 'Access-Control-Allow-Origin' header

Question

尽管这是一个非常常见的问题，但我搜索过的解决方案似乎无法解决这个问题。

import React from "react";
import axios from "axios";

class GamesList extends React.Component {
    componentDidMount = async () => {
        const response = await axios.get("https://api-v3.igdb.com/games", {
            headers: {
                "user-key": "<API-KEY>",
                "Access-Control-Allow-Origin": "http://localhost:3000",
            },
        });
        console.log(response);
    };

    render() {
        return <div>MANY GAMES</div>;
    }
}

export default GamesList;

运行此代码时收到的错误消息是:

Access to XMLHttpRequest at 'https://api-v3.igdb.com/games' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://api-v3.igdb.com/games net::ERR_FAILED

uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:83)

我也尝试过设置"Access-Control-Allow-Origin": "*"尽管错误没有改变。

是否有一个不需要使用/创建代理的简单解决方案？

--- 更新 --- 根据 @HMR 的评论，我根据 igdb 的文档编辑了下面的代码，但仍然遇到相同的错误。我哪里出错了？

import React from "react";
import axios from "axios";

class GamesList extends React.Component {
    componentDidMount = async () => {
        // As mention in the docs, I'm using POST with the necessary body
        axios.post("https://api-v3.igdb.com/headers", {
            body: {
                api_header: {
                    header: "Access-Control-Allow-Origin",
                    value: "*",
                },
            },
        });

        // now to make the actual request
        const response = await axios.get("https://api-v3.igdb.com/games", {
            headers: {
                "user-key": "<API-KEY>",
                "Access-Control-Allow-Origin": "http://localhost:3000",
            },
        });
        console.log(response);
    };

    render() {
        return <div>MANY GAMES</div>;
    }
}

export default GamesList;

甚至将以下内容发布到 https://api-v3.igdb.com/headers/ postman 返回内部 Not found :

{
    "api_header": {
        "header": "Access-Control-Allow-Origin",
        "value": "*"
    }
}

-- 最终更新-- 正如 @goto1 和 @HMR 在下面提到的，API 本身似乎没有正确支持 CORS。

我最终还是选择了代理!我正在使用https://github.com/Rob--W/cors-anywhere/ (注意:我必须手动npm install proxy-from-env)

使用 node server.js 启动服务器后，我可以将服务器地址添加到我的 igdb api 请求中。最终代码:

import React from "react";
import axios from "axios";

class GamesList extends React.Component {
    componentDidMount = async () => {
        const response = await axios.get("http://0.0.0.0:8080/https://api-v3.igdb.com/games", {
            headers: {
                "user-key": "<API-KEY>",
            },
        });
        console.log(response); // WORKS!
    };

    render() {
        return <div>MANY GAMES</div>;
    }
}

export default GamesList;

Answer 1

您是否尝试在 package.json 中设置 localhost:3000 而不是在 axios header 中设置 localhost:3000