Axios发送Post请求时出现400错误，请求无效。

Question

我正在使用Hackerrank API进行项目开发。 请查看官方文档，点击这里！

他们网站上有一个使用UNIREST的示例。

unirest.post("https://hackerrank-hackerrank.p.rapidapi.com/https://api.hackerrank.com/checker/submission.json")
.header("X-RapidAPI-Host", "hackerrank-hackerrank.p.rapidapi.com")
.header("X-RapidAPI-Key", "a72a0f1b5dmshdc3f55e233876eap1b8939jsnffad2a5b6e6e")
.header("Content-Type", "application/x-www-form-urlencoded")
.send("callback_url=https://mywebsite.com/responseHandler")
.send("source=puts 'Hello World'")
.send("lang=8")
.send("testcases=["This is input 1", "This is input 2"]")
.send("wait=false")
.send("format=json")
.end(function (result) {
  console.log(result.status, result.headers, result.body);
});

因为我正在使用axios，所以我将其转换为等效的axios代码，看起来像：

var params =  {
            "callback_url": "https://mywebsite.com/responseHandler",
            "source": "puts 'Hello World'",
            "lang": 8,
            "testcases": "[\"This is input 1\", \"This is input 2\"]",
            "wait": false,
            "format": "json"
          }
        var config = {
            mode: "no-cors",
            headers: {
                "X-RapidAPI-Host": "hackerrank-hackerrank.p.rapidapi.com",
                "X-RapidAPI-Key": "a72a0f1b5dmshdc3f55e233876eap1b8939jsnffad2a5b6e6e",
                'Access-Control-Allow-Origin': '*',
                "Content-Type": "application/x-www-form-urlencoded"
            }
        }
        axios.post("https://hackerrank-hackerrank.p.rapidapi.com/https://api.hackerrank.com/checker/submission.json", params, config)
            .catch((error) => {
                console.log(error.message);
            })
            .then((response) => {
                console.log(response);
            })

我希望这个例子可以正常运行，但是却出现了以下错误：

请求失败，状态码为400
错误：请求失败，状态码为400
在createError.js中创建错误
在settle.js中处理
在xhr.js中的XMLHttpRequest.handleLoad中处理

由于我对此比较陌生，如果有人能指出我做错了什么，那将非常有帮助！

- Rishit Ratan

---

具体的错误是： - Rishit Ratan

Answer 1

根据请求，Content-Type应为application/x-www-form-urlencoded，你应该使用FromData来传递数据。

var data= new FormData(); // Currently empty
data.append('callback_url', 'https://mywebsite.com/responseHandler');
data.append('source', "puts 'Hello World'");
data.append('lang', '8');
data.append('testcases', "[\"This is input 1\", \"This is input 2\"]");
data.append('wait', false);
data.append('format', "json");
data.append('api_key', "<valid hackerrenk api key>"); // API KEY is mandatory

axios.post("https://hackerrank-hackerrank.p.rapidapi.com/https://api.hackerrank.com/checker/submission.json", data, config)
            .catch((error) => {
                console.log(error.message);
            })
            .then((response) => {
                console.log(response);
            })

- Ashish

---

如果您检查响应，它会显示 api_key: "The API key field is required. 您需要添加 data.append('api_key', '<valid hacker rank api key>')。 - Ashish

这对我有用...在此之前，我尝试了很多选项。谢谢。 - KayO

Answer 2

Ashish指引了我正确的方向，但是使用FormData()时，我收到了状态码415（不支持的媒体类型），而不是状态码400。

对我有用的是使用URLSearchParams()代替FormData()，就像这个例子中一样：

var data= new URLSearchParams(); // Currently empty
data.append('callback_url', 'https://mywebsite.com/responseHandler');
data.append('source', "puts 'Hello World'");
data.append('lang', '8');
data.append('testcases', "[\"This is input 1\", \"This is input 2\"]");
data.append('wait', false);
data.append('format', "json");
data.append('api_key', "<valid hackerrenk api key>"); // API KEY is mandatory

axios.post("https://hackerrank-hackerrank.p.rapidapi.com/https://api.hackerrank.com/checker/submission.json", data, config)
            .catch((error) => {
                console.log(error.message);
            })
            .then((response) => {
                console.log(response);
            })

我有一个不同的示例和不同的URL，但由于这是我的公司的URL，所以无法分享我的示例。

- Boommeister