React项目中使用Axios传递ApiKey报401未授权问题排查

你的代码中请求头写法错误，导致API无法识别授权信息，返回401未授权。

错误原因 #

你将Authorization设置为嵌套对象，但HTTP请求头的字段值必须是字符串，不能是对象。同时，根据你描述的Postman操作，实际需要的请求头格式和当前写法不匹配：在Postman选择「Api Key」授权类型、填写Key为ApiKey时，Postman会自动在请求头中添加名为ApiKey的字段，值为你的密钥（而非嵌套在Authorization里）。

另外，你误用了useState钩子，发送网络请求这类副作用操作应该使用useEffect。

正确写法 #

情况1：匹配Postman的请求头格式（推荐） #

直接在headers中添加ApiKey字段：

useEffect(() => {
    const getAcc = async () => {
        try {
            const res = await axios.get(url, {
                headers: {
                    "ApiKey": `${api_key}`
                }
            });
            console.log("resPonseAdd", res)
        } catch (error) {
            console.log("myError", error)
        }
    }

    getAcc()
}, [url, api_key])

情况2：若API要求用Authorization头（部分API会这样定义） #

如果API授权格式为Authorization: ApiKey <你的密钥>，则写法如下：

useEffect(() => {
    const getAcc = async () => {
        try {
            const res = await axios.get(url, {
                headers: {
                    "Authorization": `ApiKey ${api_key}`
                }
            });
            console.log("resPonseAdd", res)
        } catch (error) {
            console.log("myError", error)
        }
    }

    getAcc()
}, [url, api_key])

额外提示 #

你可以在Postman中点击「Headers」标签，查看发送请求时实际携带的请求头，确认正确的字段名和格式，再对应调整代码即可。

内容的提问来源于stack exchange，提问作者Omokefe Ovie David