javascript - Vue.js、Axios 对 Laravel API 的多次获取 CORS 请求随机失败
问题描述
我有这个问题 - 在 Vue 组件创建的生命周期挂钩上,我通过 Axios 向外部 Laravel API 发出 2 个 CORS 获取请求。如果我只提出一个请求,一切都很好,并且 100% 的时间都可以正常工作。但是,如果我发出 2 个或更多请求,我有时会在网络选项卡中随机收到失败的请求。显然我在 Axios 上做错了什么。你能帮我么。
这是我的组件创建的钩子——我称之为 VueX 动作。
created () {
this.$store.dispatch('getPets');
this.$store.dispatch('getSpecies');
},
这是我在 VueX 商店中的操作
actions: {
getPets(context) {
return new Promise((resolve, reject) => {
axios.get('api/pets')
.then(response => {
context.commit('SET_PETS', response.data);
context.commit('SET_SELECTED_PET', response.data.data[0]);
resolve(response);
})
.catch(error => {
reject(error);
});
});
},
getSpecies(context) {
return new Promise((resolve, reject) => {
axios.get('api/species')
.then(response => {
context.commit('SET_SPECIES', response.data);
resolve(response);
})
.catch(error => {
reject(error);
});
});
},
setSelectedPet(context, pet) {
context.commit('SET_SELECTED_PET', pet);
},
}
然后我随机收到失败的请求 - 有时两个请求都正常(200 状态),其他时候其中一个失败...... 请求
请求失败 - 没有响应,我认为请求根本没有转到 Laravel API。Laravel 日志也是空的。
我认为我在使用 Axios 时做错了,因为它不是来自我的浏览器或防火墙——我已经停止了防火墙并在无任何扩展名的隐身浏览器和其他浏览器中进行了测试。任何帮助将不胜感激。
这是我在主 js 文件中设置的 Axios 标头。
// Set axios to call the backend API and set its headers on every page reload
window.axios = require('axios');
window.axios.defaults.baseURL = 'http://api.aaa';
window.axios.defaults.timeout = 30000;
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer '+getToken(),
};
解决方案
好的,经过一段时间我终于弄明白了。导致此行为的是 PHP opCache。如果您有类似的问题,只需关闭 opChache。
顺便说一句,你能告诉我你的想法是什么会导致 Laravel 出现这种行为,因为我不想失去 opCache 作为类似 Laravel 项目的选项吗?
推荐阅读
- html - 为什么它为不同的语言显示不同的字体?
- routes - Next.js SSR 具有用于呈现社交媒体应用配置文件页面的动态路由?
- angular - 构建“ng build prod”后找不到角度路线
- angular - 重试可观察队列 3 次(从失败的索引开始)
- angular - Angular - *ngFor 与嵌套表行
- statistics - 多测量模型统计检验
- email - 在 SimpleJavaMail 中嵌入图像 CID 问题
- javascript - 使用 Node Postgres 更新多个表
- c# - 处置播放器 WMPLib
- scala - 为什么集合上的“包含”不需要正确的类型?