首页 > 解决方案 > 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(),
};

标签: javascriptlaravel-5vuejs2axiosvuex

解决方案


好的,经过一段时间我终于弄明白了。导致此行为的是 PHP opCache。如果您有类似的问题,只需关闭 opChache。

顺便说一句,你能告诉我你的想法是什么会导致 Laravel 出现这种行为,因为我不想失去 opCache 作为类似 Laravel 项目的选项吗?


推荐阅读