axios授权标头仅适用于get请求

Question

I have a simple api endpoint for sharing posts /api/v1/posts/{id}/share that requires authentication with a bearer token.

I try to send a POST request like the following and it responds with a 401

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

only when i changed it to accept a GET on the backend and changed the code to this did it work

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

I tested my endpoints with an http client (insomnia) so the problem does seem to be with axios. why is this happening and how can I solve it?

the server I'm using is apache and the backend framework is laravel

Answer 1

The root cause of this problem is: axios.post and axios.get have different syntax -- the 2nd parameter represents "config" in axios.get , but represents "data" in axios.post . That's why it works in GET but fails in POST.

According to axios document , these 2 syntax are:

axios.get(url[, config])

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

Thus, when you send HTTP POST request with code:

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

The request is sent, with HTTP body as {"header":{...}} -- no request header is configured.

To make it work with axios.post , the headers config object should be passed as the 3rd parameter. Such as:

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

Answer 2

so I solved this by using a different syntax

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);

I honestly cannot say what changed but here you go for anyone that sees this.