javascript - 如何解决axios post请求问题

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 中看到上述警告和错误。 尝试按类型添加 header :

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

好的，让我们来分解一下:

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
}

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

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

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

axios 会自动设置 content-type header 。如果您有请求，它会将其设置为 application/json。但是，这将触发 CORS 预检选项请求，因为它不是 3 个安全列出的内容类型之一。

我不知道您使用的 API 需要什么内容类型，但是如果您需要避免预检请求，那么您需要设置它为 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'
  }
})

但是，这里的data 仍然被编码为 JSON(因此 content-type header 和请求正文实际上并不匹配)。我相信 jQuery 默认将 data 编码为 URL 编码的查询字符串。用于执行此操作的官方 axios 文档在这里:

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

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

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

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'
    }
  }
)

要进一步调试此问题，您应该仔细检查浏览器开发人员工具的“网络”选项卡中各个方向发送的 header 。确保它们正是您所期望的。这里应该没有任何神秘之处，您可以准确地看到正在使用哪些 header 。

此外，如果您不清楚 CORS 的工作原理以及什么可以触发预检 OPTIONS 请求，那么您应该阅读一些背景知识。

最后，您需要准确找出服务器期望的数据格式。我们可以整天猜测正确的代码可能是什么，但如果我们知道我们的目标是什么，那么就没有必要猜测。

我想补充一点，您发布的 jQuery 示例将 tracking_data 错误地拼写为 traking_data。这与 CORS 错误无关，但它让我想知道它是否真的“有效”。