使用POST和PUT Laravel护照/Vue/Axios获取401错误 [英] Get a 401 error with POST and PUT Laravel passport/Vue/Axios

问题描述

我正在使用带有单独的Laravel后端API的Vue应用程序.后端具有Laravel护照，在进行数据库调用时需要访问令牌.

I am working on a Vue application with a seperate Laravel back-end API. The back-end has Laravel passport that requires an access token when doing database calls.

通常情况下一切正常，我可以从数据库取回数据，但是由于某种原因，我的两个调用都出错了，即POST en PUT.我不知道为什么我的get请求顺利进行时，为什么我从laravel护照上取回了未认证的(401).同样，POST和PUT在邮递员应用程序中都运行良好.

Normally everything goes right, I can get data back from the database but for some reason, 2 of my calls gets errors, the POST en PUT. I don't know why I get unauthenticated (401) from laravel passport back, while my get request is going well. Also, both POST and PUT are going fine in the postman application.

get请求

   getSuppliers() {
        axios.get(`${this.$API_URL}/api/v1/relations`, {
            headers: this.headers,
        })
            .then((response) => {
                this.loaded = true;
                this.relations = response.data.data;
            })
            .catch(error => console.log(error));
    },

post请求

    axios.post(`${this.$API_URL}/api/v1/relations`, {
        headers: this.headers,
        data: {
            company_name: this.supplier.company_name,
                    language_id: this.supplier.language_id,
                    supplier_type_id: this.supplier.supplier_type_id,
                    email: this.supplier.email,
                    website: this.supplier.website,
                    recognition_number: this.supplier.recognition_number,
                    street: this.supplier.street,
                    house_number: this.supplier.house_number,
                    zipcode: this.supplier.zipcode,
                    city: this.supplier.city,
                    country: this.supplier.country,
                },
            })
                .then((response) => {
                    console.log(response);
                    // retrieve the id
                    // push the user to the show of the retrieved id
                })
                .catch(error => console.log(error));

访问令牌的帮助器功能

function getHeaders(token) {
    return {
        Accept: 'application/json',
        Authorization: `Bearer ${token}`,
    };
}

function getToken() {
    const oauth = JSON.parse(localStorage.getItem('oauth') || '{}');
    if (oauth.access_token) {
        return oauth.access_token;
    }
    return false;
}

有人在那里有同样的问题或类似之处吗?

Somebody out there that had the same problem or similair?

推荐答案

经过一番挖掘，仔细阅读了我的其他代码，并要求我找到一个可以自己解决的解决方案.

After some digging, going through my other code and requests I find a solution that fixed it for me.

代替

axios.post(`${this.$API_URL}/api/v1/relations`, {
    headers: this.headers,
    data: {
        company_name: this.supplier.company_name,
                language_id: this.supplier.language_id,
                supplier_type_id: this.supplier.supplier_type_id,
                email: this.supplier.email,
                website: this.supplier.website,
                recognition_number: this.supplier.recognition_number,
                street: this.supplier.street,
                house_number: this.supplier.house_number,
                zipcode: this.supplier.zipcode,
                city: this.supplier.city,
                country: this.supplier.country,
            },
        })
            .then((response) => {
                console.log(response);
                // retrieve the id
                // push the user to the show of the retrieved id
            })
            .catch(error => console.log(error));

我必须做

axios({
    method: 'post',
    url: `${this.$API_URL}/api/v1/relations`
    headers: this.headers,
    data: {
        company_name: this.supplier.company_name,
                language_id: this.supplier.language_id,
                supplier_type_id: this.supplier.supplier_type_id,
                email: this.supplier.email,
                website: this.supplier.website,
                recognition_number: this.supplier.recognition_number,
                street: this.supplier.street,
                house_number: this.supplier.house_number,
                zipcode: this.supplier.zipcode,
                city: this.supplier.city,
                country: this.supplier.country,
            },
        })
            .then((response) => {
                console.log(response);
                // retrieve the id
                // push the user to the show of the retrieved id
            })
            .catch(error => console.log(error));

除了样式外，我看不到任何区别，所以我不知道为什么第二种样式有效而第一种样式无效，尤其是对于put和post类型的请求.

I don't see any difference except the style, so I don't know exactly why the second style is working and the first one is not, especially for the put and post type of requests.

这篇关于使用POST和PUT Laravel护照/Vue/Axios获取401错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！