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

时间:2019-06-08 17:00:12

标签: javascript curl fetch fetch-api

在使用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。这是一个演示,所以我真的只是在尝试使其工作。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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