Axios GET 在 Safari 浏览器中不起作用答案

【问题标题】：Axios GET not working in Safari browserAxios GET 在 Safari 浏览器中不起作用
【发布时间】：2018-06-01 08:20:29
【问题描述】：

我有一个简单的方法 getInfo() 请求，它在 vue 实例中的 created() 上调用。它从外部 api 抓取数据并将其呈现在页面上。

created() {
    this.getInfo();
},
methods: {
    getInfo() {
        let vm  = this;
        let url = [my api url];
        axios.get(url)
          .then(response => {   
              console.log(response);
          })
          .catch(error => {
              console.log(error);
          })
    },

该方法在 Chrome 中运行良好，但在 Safari (High Sierra, 10.13.2) 中完全被忽略。任何想法为什么会发生这种情况？没有控制台错误。

【问题讨论】：

唯一的猜测是它不支持该方法的简写，但我预计会出现一些脚本错误。你可以试试getInfo: function() {...}。
您是否在网络选项卡中看到网络请求？您是否使用构建工具进行编译？
@JamesWestgate - 在 Safari 中，我只在第一次加载时收到网络请求，但如果我再次执行这些步骤，它不会出现并且不再被调用。使用 Webpack 进行转译。
@Bert - 如果没有速记方法，问题似乎仍然存在

标签： safari vue.js vuejs2 axios

【解决方案1】：

对我来说，我发现如果我将 / 添加到我的端点的末尾，例如/users/ 而不是 /users 它可以在 Safari 中使用，并且在它之前没有

【讨论】：

你在拔头发 6 天后才救了我

【解决方案2】：

Ok 能够解决问题，请参见下面的代码。我重构了 axios 调用，并添加了一些新选项。关键是在 axios 调用中向 URL 添加缓存破坏器。 Safari 不会自动执行此操作。谢谢大家的帮助。

    getInfo: function () {
        let vm  = this;
        let url = let url = [my api url];

        axios({
            method: 'get',
            url: url + '?nocache=' + new Date().getTime(), // Safari fix
            withCredentials: true
        })
          .then(response => {
              console.log(response)
          })
          .catch(error => {
              console.log(error);
          })
    },

【讨论】：

这是否适用于所有服务器/这是一种常见做法吗？我用的是 nginx

【解决方案3】：

正如@Bert 在他的评论中提到的，Safari 浏览器还不支持方法快捷方式。

尝试这样的事情，

created() {
    this.getInfo();
},
methods: {
    getInfo: () => {
        let vm  = this;
        let url = [my api url];
        axios.get(url)
          .then(response => {   
              console.log(response);
          })
          .catch(error => {
              console.log(error);
          })
    },

【讨论】：

如果没有方法快捷方式，问题仍然存在
在 Vue 中，绝对不要在此处不使用箭头函数。这将导致 this 成为封闭范围，而不是 Vue 实例。
但是我们现在只使用console.log 所以还可以......实际上在getInfo 方法上我们绝对不想使用箭头函数。
@JamesWestgate 我将其切换回getInfo: function() {...}。箭头语法实际上破坏了它。我刚刚想出了下面要回答的解决方案。