React Axios请求被CORS策略阻止；所请求的资源上没有“ Access-Control-Allow-Origin”标头

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/上，也会返回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中而不是在axios标头中设置localhost：3000