使用Javascript请求获取向RouteXL发送x-www-form-urlencoded请求[重复]

Posted 2023-02-27

【中文标题】使用Javascript请求获取向RouteXL发送x-www-form-urlencoded请求[重复]

【英文标题】：Sending x-www-form-urlencoded request to RouteXL using Javascript Request fetch [duplicate]

【发布时间】：2020-10-20 18:35:38

【问题描述】：

我正在尝试使用 javascript 获取 API 来访问 RouteXL Trip API。

我的请求在 Postman 中工作，它非常简单并且有效：

现在我正在尝试使用 Javascript 获取 API 复制该请求，但我无法让它工作。 API 没有看到“位置”数据。我已经在使用 Got 库的 Node.js 服务器中尝试了同样的事情，并且面临同样的问题。

这是我的浏览器代码的样子（我尝试了很多变体）：

const url = `https://api.routexl.nl/tour`;
const locations = this.makeLocations(tasks,trip);
const params = 
  skipOptimisation: true,
  locations:locations

const request = new Request(url, 
  method: 'POST',
  headers: 
    'Authorization': 'Basic authToken',
    'Content-Type': 'application/x-www-form-urlencoded'
  ,
  body: JSON.stringify(params)
)
const response = await fetch(request)
console.info("Response:", response)

返回的位置数据

this.makeLocations(tasks,trip);

与我粘贴到 Postman 中的数据相同。

这是另一个使用 FormData 的尝试：

const form = new FormData();    
const locations = [
       "address": "Start", "lng": -1.81, "postcode": "B33 8QE", "lat": 52.48, "servicetime": 0 , 
       "address": "24631000021902777", "lng": -2.440442, "postcode": "HR8 1PS", "lat": 52.088603, "servicetime": 22 , 
       "address": "End", "lng": -1.81, "postcode": "B33 8QE", "lat": 52.48, "servicetime": 0 
    ]
    form.append("locations", JSON.stringify(locations));
    const request = new Request(url, 
      method: 'POST',
      headers: 
        'Authorization': 'Basic myToken'
      ,
      body:form
    )

我也尝试在位置上使用qs stringify，但仍然得到相同的结果。

基于Post a x-www-form-urlencoded request from React Native的另一次尝试（相同结果）：

const locations = JSON.stringify([
   "address": "Start", "lng": -1.81, "postcode": "B33 8QE", "lat": 52.48, "servicetime": 0 , 
   "address": "24631000021902777", "lng": -2.440442, "postcode": "HR8 1PS", "lat": 52.088603, "servicetime": 22 , 
   "address": "End", "lng": -1.81, "postcode": "B33 8QE", "lat": 52.48, "servicetime": 0 
])
let formBody = [];
formBody.push(encodeURIComponent("locations") + "=" + encodeURIComponent(locations));
formBody.push(encodeURIComponent("skipOptimisation") + "=" + encodeURIComponent(true));
const request = new Request(url, 
  method: 'POST',
  headers: 
    'Authorization': 'Basic myToken'
  ,
  body:formBody.join("&")
)
const response = await fetch(request)

【问题讨论】：

未对此进行测试，但请注意只有位置的 值 需要为 json。您正在为给定示例中的所有参数键和值制作 json。另外，请查看 Github 上的 Javascript 示例：github.com/routexl/RouteXL-API-Connector

我必须将一个字符串传递给'body'，这就是我必须使用 JSON.stringify 的原因。 Github 上的示例使用 JQuery，我没有。如果您能对其进行测试并用现代 Javascript 发布一个示例，我将不胜感激。您的支持论坛中有一篇关于同一主题的帖子尚未得到答复。

更正，我也可以将 FormData 作为正文传递，所以我尝试使用 JSON 字符串作为位置参数来执行此操作，但我得到了相同的结果。

从副本中查看this answer。如果使用URLSearchParams

，则不需要设置内容类型标头

@kpg 我们已将 Github 上的示例更新为纯 Javascript。

【参考方案1】：

我在使用FormData 和x-www-form-urlencoded 时运气不佳，所以我改用了qs 库。

您的代码看起来像这样。

const qs = require('qs')
const url = `https://api.routexl.nl/tour`;
const locations = this.makeLocations(tasks,trip);
const params = qs.stringify(
  skipOptimisation: true,
  locations:locations
)
const request = new Request(url, 
  method: 'POST',
  headers: 
    'Authorization': 'Basic authToken',
    'Content-Type': 'application/x-www-form-urlencoded'
  ,
  body: params
)
const response = await fetch(request)
console.info("Response:", response)

希望这会有所帮助。

【讨论】：

谢谢。qs 库是我尝试过的许多其他事情之一:(。问题似乎与转义字符有关。记录不善的 RouteXL API 似乎期待'locations'的JSON字符串，但是当我将'body'参数字符串化到'fetch'请求时，转义字符被重复。奇怪的是，几年前我确实（最终）成功地使用了这个相同的API语言（Zoho's Deluge）通过组装一种数组的字符串表示。代码太可怕了，我很难将它翻译成 Javascript。

'Content-type': 'application/x-www-form-urlencoded'

@Phil 我不认为这真的与您引用的问题重复，尽管我确实在该问题中找到了答案。存在三个问题：另一篇文章与我没有使用的 React 相关；另一个帖子有十二个答案，我在那里找到答案的原因是因为你把我带到了具体的答案，我已经看过这个帖子但我自己没有找到答案；这篇文章专门与 RouteXL 相关，我曾以巨大的代价与它进行过两次战斗。我想在此处添加我的实际工作解决方案，因此已投票重新提出问题。