【问题标题】:Vue.js, Axios multiple get CORS requests to Laravel API are randomly failingVue.js,Axios 对 Laravel API 的多次获取 CORS 请求随机失败
【发布时间】:2018-09-02 09:44:13
【问题描述】:

我有这个问题 - 在 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(),
};

【问题讨论】:

  • 单击该图像上的该错误检查响应,这将提供有关该错误的更多见解。据我所知,laravel api 路由不受 CORS 影响。
  • 请求失败 - 没有响应,我认为请求根本没有到达 Laravel API。 Laravel 日志也是空的。
  • 会不会是你当时发送的请求太多了?
  • (1) 服务器在哪里运行? (2)您可以尝试在测试方法中同时做出两个响应,远离 vuex 等吗? (例如,在您设置标题的位置)
  • 在此期间小问题 - 如果您只是传递错误,则无需编写 catch - pastebin.com/8e0crUZE - 这与您的示例操作完全相同。 或者,如果不使用返回值,pastebin.com/biAgwTEp

标签: javascript laravel-5 vuejs2 axios vuex


【解决方案1】:

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

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

【讨论】:

  • 我也有同样的问题,你说 OpCache 是问题,因为你是在 localhost 上测试的,这让我很惊讶?你肯定没有在你的开发环境中启用 opcache 吗?你确定是这个吗?还必须在 prod 上禁用 opcache 似乎不对
猜你喜欢
  • 2020-07-08
  • 2015-04-03
  • 2018-07-11
  • 2022-01-23
  • 2023-01-25
  • 2018-02-01
  • 2018-11-05
  • 2020-05-31
  • 1970-01-01
相关资源
最近更新 更多