获取 API 被阻止，但不是 AJAX 或 XHR

Question

我使用源提供的确切代码对 URL 缩短器进行了 API 调用。 Fetch 返回 400 错误（错误请求），但 JQuery 和 XHR 都返回缩短的 URL，没有任何问题。这是为什么？

我尝试将mode: 'no-cors' 和"crossDomain": true 添加到请求中，但都不起作用。

→ Image of What each request returns here

这是我的代码：

（获取）

fetch("https://url-shortener-service.p.rapidapi.com/shorten", {
"method": "POST",
"headers": {
    "x-rapidapi-host": "url-shortener-service.p.rapidapi.com",
    "x-rapidapi-key": "SIGN-UP-FOR-KEY",
    "content-type": "application/x-www-form-urlencoded"
},
"body": {
    "url": "https://google.com/"
}
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.log(err);
});

(XHR)

var data = "url=https%3A%2F%2Fgoogle.com%2F";

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
    }
});

xhr.open("POST", "https://url-shortener-service.p.rapidapi.com/shorten");
xhr.setRequestHeader("x-rapidapi-host", "url-shortener-service.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "SIGN-UP-FOR-KEY");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

xhr.send(data);

(JQuery)

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://url-shortener-service.p.rapidapi.com/shorten",
    "method": "POST",
    "headers": {
        "x-rapidapi-host": "url-shortener-service.p.rapidapi.com",
        "x-rapidapi-key": "SIGN-UP-FOR-KEY",
        "content-type": "application/x-www-form-urlencoded"
    },
    "data": {
        "url": "https://google.com/"
    }
}

$.ajax(settings).done(function (response) {
    console.log(response);
});

Answer 1

你只需要像这样对正文进行字符串化

body: JSON.stringify({ url: "https://google.com/" }),

所以整个代码会是这样的

fetch("https://url-shortener-service.p.rapidapi.com/shorten", {
"method": "POST",
"headers": {
    "x-rapidapi-host": "url-shortener-service.p.rapidapi.com",
    "x-rapidapi-key": "SIGN-UP-FOR-KEY",
    "content-type": "application/x-www-form-urlencoded"
},
body: JSON.stringify({ url: "https://google.com/" }),

})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.log(err);
});