访问令牌丢失、无效或过期,在React中的Axios POST API中

gk7wooem  于 2022-12-23  发布在  iOS
关注(0)|答案(1)|浏览(203)

为了将图像上传到服务器,我必须使用Axios,但首先我必须获得apiKey和access_token,我对它们进行了管理并将其保存在localStorage中。当我尝试将图像上传到服务器时,我收到了"403"错误消息,请参见标题。我不知道是什么原因导致的。有人能给我一些建议吗?非常感谢

//Getting apiKey and save to loacalStorage as api
axios.post('https://URL/tenants', {
        "name": "user-name",
        "password": "user-password"
    })
        .then(res => {
            axios.defaults.headers['x-api-key'] = res.data.apiKey;

            localStorage.setItem("api", JSON.stringify(res.data.apiKey))
        })
        .catch(err => { console.log(err) });
//Getting access_token and save to localStorage
let apiString = localStorage.getItem("api").replaceAll('"', '');

    axios({
        method: 'post',
        url: 'https://URL/login',
        data: {
            "username": "user-name",
            "password": "user-password"
        },
        headers: {
            "X-API-KEY": apiString
        }
    }).then((response) => {
        axios.defaults.headers.post['X-API-KEY'] = localStorage.getItem("api")
        localStorage.setItem("access_token", JSON.stringify(response.data.access_token))

    }).catch(error => { console.log(error) });

当我尝试从api获取数据时,我得到一个空对象作为响应,这是正确的,没有抛出任何错误。

//get array or object from api

const accessToken = localStorage.getItem("access_token");

axios({
            method: 'get',
            url: 'URL/articles',
            data: {
    
            },
            headers: {
                "X-API-KEY": apiString,
                "Authorization": accessToken
            }
        }).then((response) => {
    
            console.log(response.data)
        }).catch(error => { console.log(error) }); */

但是如果我尝试向API发送数据,我会得到错误消息403-访问令牌丢失、无效或过期。
//上传数据到服务器

axios({
        method: 'post',
        url: 'URL/images',
        headers: {
            "X-API-KEY": apiString,
            "Authorization": accessToken
        },
        data: image
    }).then((response) => {
        console.log(response);

    }).catch(error => {console.log(error)});

我不明白为什么在这种情况下它不接受access_token ...文档说这个API使用CRUD方法,我不知道这是否有影响。非常感谢

jv4diomz

jv4diomz1#

这是什么API?有可能你不需要get请求的访问令牌,但是posts请求需要它们,这就是为什么你在get的情况下没有得到错误。在3个地方检查你的访问令牌:
1.当您从服务器获取它时,在.then()中。
1.在本地存储中设置好后,检查一下是否可以看到它,你可以通过dev tools -〉application -〉local storage来查看,也可以通过localStorage.getItem()编程来查看
1.当您发送post请求时,请检查头部以确保令牌是正确的(例如,它可能是作为object对象发送的)。

相关问题