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