axios 授权标头仅适用于获取请求答案

【问题标题】：axios Authorization headers only working with get requestsaxios 授权标头仅适用于获取请求
【发布时间】：2019-11-11 04:00:32
【问题描述】：

我有一个简单的 api 端点用于共享帖子 /api/v1/posts/{id}/share，需要使用不记名令牌进行身份验证。

我尝试发送如下所示的 POST 请求，它以 401 响应

axios.post(`/api/v1/posts/${id}/share`,
        {
        "headers": {
                "Authorization":"Bearer "+token,
                "Content-Type": "application/x-www-form-urlencoded",
                "Accept": "application/json"
            },
        });

只有当我将其更改为在后端接受 GET 并将代码更改为此它才起作用

axios.get(`/api/v1/posts/${id}/share`,
        {
        "headers": {
                "Authorization":"Bearer "+token,
                "Content-Type": "application/x-www-form-urlencoded",
                "Accept": "application/json"
            },
        });

我使用 http 客户端（失眠）测试了我的端点，所以问题似乎出在 axios 上。为什么会发生这种情况，我该如何解决？

我使用的服务器是apache，后端框架是laravel

【问题讨论】：

标签： javascript api http authorization axios

【解决方案1】：

这个问题的根本原因是：axios.post和axios.get语法不同——第二个参数在axios.get中代表“config”，而在axios.post中代表“data”。这就是它在 GET 中有效但在 POST 中失败的原因。

根据axiosdocument，这2个语法是：

axios.get(url[, config])

axios.post(url[, data[, config]])

因此，当您使用代码发送 HTTP POST 请求时：

axios.post(`/api/v1/posts/${id}/share`,
        {
        "headers": {
                ...
            },
        });

发送请求，HTTP body为{"header":{...}} -- 没有配置请求头。

要使其与axios.post 一起使用，headers 配置对象应作为第三个参数传递。如：

axios.post(`/api/v1/posts/${id}/share`,
        {}, // or whatever data you want to send.
        {
        "headers": {
                ...
            },
        });

【讨论】：

【解决方案2】：

所以我通过使用不同的语法解决了这个问题

const options = {
        method:"post",
        "headers": {
            "Authorization":token,
            "Content-Type": 'application/x-www-form-urlencoded',
            "Accept": "application/json"
        },
        url:`/api/v1/posts/${id}/share`
    };

    axios(options);

老实说，我不能说发生了什么变化，但是看到这一点的任何人都可以在这里找到。

【讨论】：