Axios Post 请求 Giving Error 400 , Bad Request

Posted 2023-02-22

【中文标题】Axios Post 请求 Giving Error 400 , Bad Request

【英文标题】：Axios Post request Giving Error 400 , Bad Request

【发布时间】：2019-10-22 18:56:03

【问题描述】：

我正在为一个项目使用 Hackerrank API。 看官方文档，点击here！

在他们的网站上有一个使用 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 (createError.js:16) 定居时 (settle.js:18) 在 XMLHttpRequest.handleLoad (xhr.js:77)

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

【问题讨论】：

准确的错误是：

【参考方案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);
            )

【讨论】：

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

这对我有用......在此之前我尝试了很多选择。谢谢。

【参考方案2】：

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

对我有用的是使用URLSearchParams() 而不是FormData()、like in this example：

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）