时间戳

首页 > 解决方案 > 带有标头的vuejs axios GET在Safari中不起作用

vue.js - 带有标头的vuejs axios GET在Safari中不起作用

问题描述

我正在进行以下 GET 调用，该调用在 Chrome 上完美运行，但在 Safari 上却不行：

methods: {
    fetchData: function() {
      var self = this;

      axios
        .get(MY_API_URL, {
          headers: {
            "X-Locale": self.locale, // self.locale = "en"
           // tried these too
           // "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
           // "Access-Control-Allow-Headers": "*",
           // "Access-Control-Allow-Origin": "*"
          }

        })
        .then(function(data) {
          let strings = data.data.data;
          console.log("strings: ", self.strings);
        })
        .catch(function(error) {
          console.log("Error", error);
        });
    }
},
async mounted() {
    await this.fetchData();
}

Safari给出的错误：

[Error] Request header field X-Locale is not allowed by Access-Control-Allow-Headers.
[Error] XMLHttpRequest cannot load MY_API_URL due to access control checks.
[Error] Failed to load resource: Request header field X-Locale is not allowed by Access-Control-Allow-Headers. (content, line 0)

标签： vue.jsaxiosxmlhttprequest

解决方案

感谢@skirtle，我得到了这个答案：

Access-Control-Allow-Headers: *Safari 不支持： https ://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

这更像是一个服务器端的解决方案。

Access-Control-Allow-Headers:
X-Locale,Content-Type,Origin,Accept,X-Requested-With,Access-Control-Request-Method,Access-Control-Request-Headers

推荐阅读