Javascript igdb.com api |响应CORS策略阻止的Axios请求；否'；访问控制允许原点'；请求的资源上存在标头

尽管这是一个非常常见的问题，但我所寻找的解决方案似乎并没有为我解决这个问题

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;

我还尝试设置了

“访问控制允许原点”：“*”

，尽管错误没有改变

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

---更新--- 在@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;

--最后更新-- 正如@goto1和@HMR在下面提到的，api本身似乎并不正确地支持CORS

我最终还是和一个代理人一起去了！我正在使用（注意：我必须手动从env

npm安装代理）

使用
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;

从“React”导入React；
从“axios”导入axios；
类GamesList扩展了React.Component{
componentDidMount=async（）=>{
const response=等待axios.get（“http://0.0.0.0:8080/https://api-v3.igdb.com/games“{
标题：{
“用户密钥”：“，
},
});
console.log（响应）；//有效！
};
render（）{
返回许多游戏；
}
}
导出默认游戏列表；
您是否尝试在package.json中设置localhost:3000而不是在axios标头中设置
您是否尝试在package.json中设置localhost:3000而不是在axios标头中设置
“尝试设置”
“访问控制允许来源”
“在哪里？”？您不能从客户端设置它，它是一个响应头，因此如果
api-v3.igdb.com
没有设置它（并且您没有实现它的所有权），代理是您从需要COR的客户端获得的唯一选项。但这在客户端，而不是服务器中。如果客户端设置头可以绕过CORS，那就完全没有意义了！你需要告诉api@solarflare它看起来“很快就要来了”，所以现在不确定你能做什么。是的，我试着向api发出post请求，注册一个CORS，api会将其作为响应头发送，但得到了404，所以文档中的
很快就要来
部分实际上意味着你现在不能使用它。换言之；现在不能使用客户端JavaScript来使用api。您只需制作一次axios post，即可配置api设置。“已尝试设置
“访问控制允许原点”
“在哪里？”？您不能从客户端设置它，它是一个响应头，因此如果
api-v3.igdb.com
没有设置它（并且您没有实现它的所有权），代理是您从需要COR的客户端获得的唯一选项。但这在客户端，而不是服务器中。如果客户端设置头可以绕过CORS，那就完全没有意义了！你需要告诉api@solarflare它看起来“很快就要来了”，所以现在不确定你能做什么。是的，我试着向api发出post请求，注册一个CORS，api会将其作为响应头发送，但得到了404，所以文档中的
很快就要来
部分实际上意味着你现在不能使用它。换言之；现在不能使用客户端JavaScript来使用api。您只需制作一次axios贴子即可配置api设置。对不起，这是如何工作的？这是用于代理服务器的吗？是的，我们在package.json中设置代理，如“proxy”：“”。这是此代理方法的正式文档。如果不是necc，则从axios上卸下收割台esryhttps://create-react-app.dev/docs/proxying-api-requests-in-development/Thank 你是因为这个-嗯，出于某种原因。这在我的环境中不太管用，但我现在有了一个解决方案（见上面的更新），很高兴知道这可以做到！对不起，这是怎么回事？这是用于代理服务器的吗？是的，我们在package.json中设置代理，如“proxy”：“”。这是此代理方法的正式文档。如果不是necc，则从axios上卸下收割台esryhttps://create-react-app.dev/docs/proxying-api-requests-in-development/Thank 你是因为这个-嗯，出于某种原因。这在我的环境中不太管用，但我现在有了一个解决方案（见上面的更新），很高兴知道这可以做到！
{
    "api_header": {
        "header": "Access-Control-Allow-Origin",
        "value": "*"
    }
}

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;