Axios Post request Giving Error 400 , Bad Request

Question

I am using the Hackerrank API for a Project. See the official documentation, click here!

There is an example on their website which uses 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); });

Since I am using axios, I converted it to an equivalent axios code which looks like:

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

I expect this to work just the example shown in the example, but it gives me the following error:

Request failed with status code 400
Error: Request failed with status code 400
at createError (createError.js:16)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:77)

I am relatively new to this, if someone can point out what i am doing wrong, that would be very helpful!

The precise Error being:

Rishit Ratan
– Rishit Ratan

2019-06-07 10:11:49 +00:00
Commented Jun 7, 2019 at 10:11 — Rishit Ratan
– Rishit Ratan, Commented Jun 7, 2019 at 10:11

Ashish · Accepted Answer · 2019-06-07 10:31:55Z

As request Content-Type is application/x-www-form-urlencoded, you should pass data as 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); })

If you check the response, it is showing api_key: "The API key field is required. You need to add data.append('api_key', '<valid hacker rank api key>')
This worked for me... and I tried a lot of options prior to this. Thanks.

Boommeister · Accepted Answer · 2021-03-28 11:29:33Z

Ashish pointed me into the correct direction, but with FormData() I received a status 415 (Unsupported Media Type) instead of the status 400.

What worked for me was using URLSearchParams() instead of 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); })

(I had a different example with a different URL, but can't share my example since it's an URL from my company)

Collectives™ on Stack Overflow

Axios Post request Giving Error 400 , Bad Request

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related