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("", {"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":"/","referrerPolicy":"no-referrer-when-downgrade","body":JSON.stringify({'test':'1'}),"method":"POST","mode":"cors"});

Returns Error 400:

fetch("", {"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":"/","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 ments, 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 '' -H 'origin: ' -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' -H 'referer: /' --data-binary '{"status_type":"subscribe","subscription":{"endpoint":":APA91bEYi2Oydq9c5zMug2QeZK3VDd089-7-YylSnUFqpqc3WlFrZT2tkejzROplb0SHCMA2Tc9Xq0ujhpUa3S-8yWpONgNJ4tFEkyy0m3jcvi3BP2FtNp6_pbdgtLP2nwbuDjkHpc8r","expirationTime":null,"keys":{"p256dh":"BGSJ9xrSKmkTKXjMGYfFAWZ2c_Cj44QJ1k5HkvsDPF-8iphCdQAaSS_ob3G7MOSzsEO-L7fUVs7US21MfuBV-4c","auth":"v8RL7EgDnBlSXnvT7PhvVw"}},"browser":"chrome"}' --pressed

fetch("", {"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":"/","referrerPolicy":"no-referrer-when-downgrade","body":"{\"status_type\":\"subscribe\",\"subscription\":{\"endpoint\":\":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?

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./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./","referrerPolicy":"no-referrer-when-downgrade","body":JSON.stringify({'test':'1'}),"method":"POST","mode":"cors"});

Returns Error 400:

fetch("http://example./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./","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 ments, 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./webpush/save_information' -H 'origin: https://example.' -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.' -H 'referer: https://example./' --data-binary '{"status_type":"subscribe","subscription":{"endpoint":"https://fcm.googleapis./fcm/send/fiGP6rOnDwE:APA91bEYi2Oydq9c5zMug2QeZK3VDd089-7-YylSnUFqpqc3WlFrZT2tkejzROplb0SHCMA2Tc9Xq0ujhpUa3S-8yWpONgNJ4tFEkyy0m3jcvi3BP2FtNp6_pbdgtLP2nwbuDjkHpc8r","expirationTime":null,"keys":{"p256dh":"BGSJ9xrSKmkTKXjMGYfFAWZ2c_Cj44QJ1k5HkvsDPF-8iphCdQAaSS_ob3G7MOSzsEO-L7fUVs7US21MfuBV-4c","auth":"v8RL7EgDnBlSXnvT7PhvVw"}},"browser":"chrome"}' --pressed

fetch("https://example./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./","referrerPolicy":"no-referrer-when-downgrade","body":"{\"status_type\":\"subscribe\",\"subscription\":{\"endpoint\":\"https://fcm.googleapis./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?

• javascript
• json

• 2 The server returns 4xx or 5xx, not the browser. – jonrsharpe Commented Feb 23, 2019 at 17:45
• @jonrsharpe Oh really? I read: All HTTP response status codes that are in the 4xx category are considered client error responses. These types of messages contrast with errors in the 5xx category, which are considered server error responses – User Commented Feb 23, 2019 at 17:47
• 2 Yes, but either way the server sends it. 4xx means something was wrong with the request in the server's "opinion". – jonrsharpe Commented Feb 23, 2019 at 17:47
• What is the server and why does it return 500 for something that is not implemented? – samsonthehero Commented Feb 23, 2019 at 17:53
• i guess for 400 there is missing parameter not that its actually a bad request its just that it got missing parameter somewhere. (key,value) json pair isnt getting valid. – Himanshu Commented Feb 23, 2019 at 17:56

1 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./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.