如何解决Axios发布请求的问题

Question

有这样一种vue方法：

methods: {

sendTrackerClientData () {

    return axios.post("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=00227220201402050613" , {
      tracking_data: 'some data'
     })
    .then(response => {
      console.log('post method is working!');
    })
    .catch(function (error) {
      console.log(error);
    });
},

}

哪个按钮单击事件被挂起

尝试发送数据后，我们可以在Firebug中看到上述警告和错误。 尝试按类型添加标题：

return axios.post("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id="+ this.$store.state.tracker.trackingKeyId , {
   headers: {
       'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        'X-Powered-By': 'bacon'
      },
      tracking_data: this.$store.state.tracker.trackingClientData
     })
    .then(response => {
      console.log('post method is working!');
    })
    .catch(function (error) {
      console.log(error);
    });

它什么也没导致。
问题：
我该如何解决这个问题？

Answer 1

问题表示服务器限制跨域请求。您尝试添加的标头应添加到服务器端。不修改服务器代码/设置，就无法使其正常工作。

Answer 2

好，让我们分解一下：

axios.post("... lots of stuff ..."+ this.$store.state.tracker.trackingKeyId , {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json',
    'X-Powered-By': 'bacon'
  },
  tracking_data: this.$store.state.tracker.trackingClientData
})

您要传递给post的第一个参数是URL。我将假定这是正确的URL。

您要传递的第二个参数是该对象：

{
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json',
    'X-Powered-By': 'bacon'
  },
  tracking_data: this.$store.state.tracker.trackingClientData
}

这在很多方面都是错误的。

首先，您似乎正在尝试将 response 标头添加为 request 标头。 Access-Control-Allow-Origin和X-Powered-By都不应该在那里。它们应该在服务器上。

但是实际上并没有设置它们，因为您将headers配置放在错误的位置。 post的参数应为url，data，config。 headers需要进入config，而不是data。

axios将自动设置content-type标头。对于您的请求，它将设置为application/json。但是，由于这不是3种安全列出的内容类型之一，因此将触发CORS飞行前选项请求。

我不知道您使用的API content-type是什么，但是如果您需要避免执行预检请求，则需要将其设置为{{ 1}}，application/x-www-form-urlencoded或multipart/form-data。例如：

text/plain

但是，axios.post("... lots of stuff ..."+ this.$store.state.tracker.trackingKeyId , { tracking_data: this.$store.state.tracker.trackingClientData }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) 仍在此处被编码为JSON（因此data标头和请求主体实际上并不匹配）。我相信jQuery默认将content-type编码为URL编码的查询字符串。这样做的官方axios文档在这里：

https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

但是，所有这些很大程度上取决于服务器期望的格式。

由于您只有一个参数，因此可能可以执行以下操作：

data

要进一步调试，您应该仔细检查浏览器开发人员工具的“网络”标签中以各种方式发送的标头。确保它们正是您所期望的。这里不应该有任何谜团，您可以确切地看到正在使用什么标题。

此外，如果您不清楚CORS的工作原理以及触发预检OPTIONS请求的原因，则应该对此做一些背景阅读。

最后，您需要准确确定服务器期望数据使用哪种格式。我们可以整日猜测正确的代码是什么，但是如果我们知道我们的目标是什么，则无需猜测。

我还要补充一点，您发布的jQuery示例将axios.post( "... lots of stuff ..."+ this.$store.state.tracker.trackingKeyId, 'tracking_data=' + encodeURIComponent(this.$store.state.tracker.trackingClientData), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } } ) 拼写为tracking_data。那不会与CORS错误有关，但是让我怀疑它是否真的“有效”。