Issue with API using JS fetch

Question

Hello,

Unfortunately after trying everything I could think of, I was not able to use the API using fetch. I continuously received an error "The payload doesn't match the content-type header". I have included images of my code and the errors in the document below. I used the same as was in the playground. I tried even json stringify and json parse to just play around seeing if it would work.

I was able to get it working with axios, but just putting this here if it helps you or anyone else troubleshoot. Not sure if it is a formatting issue as I use eslint and prettier.

[document](https://docs.google.com/document/d/11RmbjZeZuh-jBb7nCkFVC_-MEISl3-Dvds6uNcDMCWo/edit?usp=sharing)

Best regards

Distance.to · Answer

You're right. The example code is wrong. You need to JSON.stringify the body:

`const url = 'https://distanceto.p.rapidapi.com/distance/route';
const options = {
	method: 'POST',
	headers: {
		'content-type': 'application/json',
		'X-RapidAPI-Key': '',
		'X-RapidAPI-Host': 'distanceto.p.rapidapi.com'
	},
	body: JSON.stringify({
		route: [
			{
				country: 'DEU',
				name: 'Berlin'
			},
			{
				country: 'DEU',
				name: 'Hamburg'
			}
		]
	})
};

try {
	const response = await fetch(url, options);
	const result = await response.text();
	console.log(result);
} catch (error) {
	console.error(error);
}`

Distance

9.6 / 10

707ms

100%

100%

Issue with API using JS fetch