Question

在使用Fetch发送POST请求以缩短URL时遇到了一个大问题。

我很好，能够通过cURL命令向此网址缩短程序API发送POST请求：

卷曲命令

curl -d 'api_key=xxxxxxxxxxxxxx&url=https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch' http://fakeurlforexample/api/shorten/

响应

{"url": "https://fakeurlforexample/BdzfM3", "long_url": "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch", "name": "BdzfM3"}

我从API中获得了很好的响应负载。

但是当我使用下面提供的代码通过Fetch执行此操作时，我得到200 OK，并且在响应有效载荷中，我遇到了400验证错误，我缺少API密钥。

但是，开发人员控制台中的请求有效负载显示参数已正确传递到API（我认为...）

{"api_key":"xxxxxxxxxxxxxxxxx","url":"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch"}

这是我的代码：

let get_url = 'http://fakeurlforexample.com/api/shorten/';

    let request = new Request(get_url, {
        method: 'POST', 
        body: JSON.stringify({'api_key':'xxxxxxxxx', 'url': 'https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch'})
    });

    fetch(request)
    .then(function() {
        console.log(request);
        console.log(request.url);
     })

有人看到我在这里犯的错误吗？

现在，本周几小时以来，本恩一直被打败。感谢您的帮助和协助！不，我现在无法轻易地将代码过渡到axios。这是一个演示，所以我真的只是在尝试使其工作。

Answer 1

可能是因为您定义了2次标头。

Answer 2

在-d, --data <data>的{{3}}选项部分中：

（HTTP）将POST请求中的指定数据发送到HTTP服务器，就像用户填写HTML表单并按Submit按钮时浏览器所做的一样。这将导致curl使用内容类型application / x-www-form-urlencoded将数据传递到服务器。与-F，-form进行比较。

与此同时，您正在发送JSON对象（内容类型：application/json）：

let request = new Request(get_url, {
  method: 'POST', 
  body: JSON.stringify({'api_key':'xxxxxxxxx', 'url': 'https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch'})
});

由于知道curl请求成功，因此API端点接受application/x-www-form-urlencoded，因此可以将内容类型设置为application/x-www-form-urlencoded，然后将主体作为字符串发送：

let request = new Request(get_url, {
  method: 'POST',
  headers: new Headers({'content-type': 'application/x-www-form-urlencoded'}),
  body: 'api_key=xxxxxxxxxxxxxx&url=https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch'
});

cURL命令有效，但是Fetch API调用在响应有效载荷中返回200并显示400验证错误

2 个答案: