为了将图像上传到服务器,我必须使用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方法,我不知道这是否有影响。非常感谢
1条答案
按热度按时间jv4diomz1#
这是什么API?有可能你不需要get请求的访问令牌,但是posts请求需要它们,这就是为什么你在get的情况下没有得到错误。在3个地方检查你的访问令牌:
1.当您从服务器获取它时,在.then()中。
1.在本地存储中设置好后,检查一下是否可以看到它,你可以通过dev tools -〉application -〉local storage来查看,也可以通过localStorage.getItem()编程来查看
1.当您发送post请求时,请检查头部以确保令牌是正确的(例如,它可能是作为object对象发送的)。