Vue.js，Axios多次获取对Laravel API的CORS请求随机失败

Question

我有这个问题 - 在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状态），有时其中一个失败... Requests

请求失败 - 没有响应，我认为请求根本不会转到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(),
};

Answer 1

好吧，过了一段时间我终于明白了。正是PHP opCache导致了这种行为。如果你有类似的问题，只需关闭opChache。

顺便说一句，你能否告诉我你可能会从Laravel引起这种行为的想法，因为我不想失去opCache作为类似Laravel项目的选择？