fetch returns 400 bad request

Question

I'm trying to make a fetch request to my own server. Error 500 is ideally what I want, because that means the request was successfully sent to the server and my server-side code isn't implemented, so I expect there to be a HTTP 500 response.

However, when I put in another variable, it then returns error 400, which means the request was poorly-formed, so it didn't even make it to the server, I guess?

I don't get why changing the variables would cause the browser to say the request was poorly-formed (400).

Returns Error 500:

fetch("http://example.com/webpush/save_information", {"credentials":"include","headers":{"accept":"*/*","accept-language":"en-US,en;q=0.9","alexatoolbar-alx_ns_ph":"AlexaToolbar/alx-4.0.3","cache-control":"no-cache","pragma":"no-cache"},"referrer":"http://example.com/","referrerPolicy":"no-referrer-when-downgrade","body":JSON.stringify({'test':'1'}),"method":"POST","mode":"cors"});

Returns Error 400:

fetch("http://example.com/webpush/save_information", {"credentials":"include","headers":{"accept":"*/*","accept-language":"en-US,en;q=0.9","alexatoolbar-alx_ns_ph":"AlexaToolbar/alx-4.0.3","cache-control":"no-cache","pragma":"no-cache"},"referrer":"http://example.com/","referrerPolicy":"no-referrer-when-downgrade","body":JSON.stringify({'browser':'chrome'}),"method":"POST","mode":"cors"});

Can anyone spot a difference?

Edit:

Apparently, it is server-side generated based on the comments, so I'm adding information to my question. I went ahead and grabbed the full fetch and full curl from my console of the request returning error 400:

curl 'https://example.com/webpush/save_information' -H 'origin: https://example.com' -H 'accept-encoding: gzip, deflate, br' -H 'accept-language: en-US,en;q=0.9' -H 'alexatoolbar-alx_ns_ph: AlexaToolbar/alx-4.0.3' -H 'cookie: __cfduid=d558e24311af0551aa5e71c5182a5973c1543351195; _ga=GA1.2.252947937.1543425255; _gid=GA1.2.1592442174.1550785627; gsScrollPos-4659=0; gsScrollPos-4711=; gsScrollPos-4678=' -H 'pragma: no-cache' -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36' -H 'content-type: application/json' -H 'accept: */*' -H 'cache-control: no-cache' -H 'authority: example.com' -H 'referer: https://example.com/' --data-binary '{"status_type":"subscribe","subscription":{"endpoint":"https://fcm.googleapis.com/fcm/send/fiGP6rOnDwE:APA91bEYi2Oydq9c5zMug2QeZK3VDd089-7-YylSnUFqpqc3WlFrZT2tkejzROplb0SHCMA2Tc9Xq0ujhpUa3S-8yWpONgNJ4tFEkyy0m3jcvi3BP2FtNp6_pbdgtLP2nwbuDjkHpc8r","expirationTime":null,"keys":{"p256dh":"BGSJ9xrSKmkTKXjMGYfFAWZ2c_Cj44QJ1k5HkvsDPF-8iphCdQAaSS_ob3G7MOSzsEO-L7fUVs7US21MfuBV-4c","auth":"v8RL7EgDnBlSXnvT7PhvVw"}},"browser":"chrome"}' --compressed

fetch("https://example.com/webpush/save_information", {"credentials":"include","headers":{"accept":"*/*","accept-language":"en-US,en;q=0.9","alexatoolbar-alx_ns_ph":"AlexaToolbar/alx-4.0.3","cache-control":"no-cache","content-type":"application/json","pragma":"no-cache"},"referrer":"https://example.com/","referrerPolicy":"no-referrer-when-downgrade","body":"{\"status_type\":\"subscribe\",\"subscription\":{\"endpoint\":\"https://fcm.googleapis.com/fcm/send/fiGP6rOnDwE:APA91bEYi2Oydq9c5zMug2QeZK3VDd089-7-YylSnUFqpqc3WlFrZT2tkejzROplb0SHCMA2Tc9Xq0ujhpUa3S-8yWpONgNJ4tFEkyy0m3jcvi3BP2FtNp6_pbdgtLP2nwbuDjkHpc8r\",\"expirationTime\":null,\"keys\":{\"p256dh\":\"BGSJ9xrSKmkTKXjMGYfFAWZ2c_Cj44QJ1k5HkvsDPF-8iphCdQAaSS_ob3G7MOSzsEO-L7fUVs7US21MfuBV-4c\",\"auth\":\"v8RL7EgDnBlSXnvT7PhvVw\"}},\"browser\":\"chrome\"}","method":"POST","mode":"cors"});

This is for the client-side implementation portion of this tutorial .

Does anything look ill-formed?

Answer 1

It is just a convention to use 4XX for client errors and 5XX for server errors. Both types of errors originate from the server. You should look at the server code to determine why the error was 400 or 500.

Without the server code you are using, it is difficult to give an exact reason. Since I don't have access to your server, here is a similar server file so you can understand how the error is generated:

• return HttpResponse(status=400) means the server will return a 400 error code if there was a Python ValueError while trying to parse JSON from the request body.
• This sample does not have code like return HttpResponse(status=500) , but that is what would cause a 500 status code.

I'm guessing a method like save_info is responsible for handling requests to http://example.com/webpush/save_information/... because of this line in urls.py :

url(r'^save_information', views.save_info, name='save_webpush_info')

So you can look for similar things in your server code (and maybe add them to your question).

There is an example of the server sending errors in ~/djangopush/djangopush/views.py of the tutorial you linked, but I don't think it's directly related to the API you are fetching. However it sends the status codes slightly differently:

• return JsonResponse(status=400, data={"message": "Invalid data format"})
• return JsonResponse(status=500, data={"message": "An error occurred"})

Again, the examples above are almost certainly not the direct cause of your errors. They are just guides for what to look for. If you share the appropriate server files, we can give you a more specific reason.