POST Request with JSON Data in Javascript

Question

I've been trying to send a JSON payload through a JS script but my webhooks seem unable to see the payload whatever I write.

Here is the code I put together from various online sources:

let xhr = new XMLHttpRequest();

xhr.open("POST","https://webhook.site/4530328b-fc68-404a-9427-3f2ccd853066/",true);

xhr.setRequestHeader("Content-Type", "application/json");

let data = JSON.stringify({'eventType' : 'test'});

xhr.send(data);

I'm not a JS developer but it seems to me that this should work. However every time I run this snippet the POST URL does not show anything back :/

Any idea why that is over here :) ?

Thank you for your time!

"*the POST URL does not show anything back*" In the snippet above, can you point to a line or lines of code that do *anything* with the resulting HTTP response to the point where you expect it to "*show anything back*"? Please update your code to conform to our guidance on creating a [mre], as well as [ask]. — esqew, May 02 '22 at 15:31
Is that webhook URL even CORS-enabled? Otherwise, you won't be able to send data to it via client-side JS from a different origin. — CBroe, May 02 '22 at 15:34
Hi @esqew , thanks for looking into it so quickly. I expect that the last line of the code (xhr.send(data);) would send the {'eventType' : 'test'} JSON payload to the URL in line 3. The best way to reproduce this is to take the same code snippet and run it with a different webhook URL (From Zapier or webhook.site or anything that accepts JSON payloads really) and see that it does not look like it's receiving the payload :( — Yaniss Illoul, May 02 '22 at 15:36
Any particular reason you've elected to use the outdated `XMLHTTPRequest` instead of the more modern `fetch`, which would make this a bit less complex and more readable? — esqew, May 02 '22 at 15:38
Hi @CBroe , thanks for looking into it as well. I've only been sending Python requests to this webhook.site URL and never had any issue displaying JSON or querystring payloads. This is my first time sending requests with Javascript. I have to say that it does receive something. Webhook.site recognises that a request has been received, it just has no payload attached to the request. I'll add a screenshot to the original question to clear that up. — Yaniss Illoul, May 02 '22 at 15:39
@esqew No reason other than I'm not a JS developer and XMLHTTPRequest was mentioned in all of the examples I found online. I'll look into fetch and will update if I manage to make this work, thanks! — Yaniss Illoul, May 02 '22 at 15:40

score 1 · Accepted Answer · answered May 02 '22 at 15:51

In your example, the webhook.site service you're attempting to connect to with your JavaScript isn't enabled (by default) with the proper CORS headers that modern browsers respect & enforce to improve user security. The developer console in your browser of choice should point this out to you; the error mine gave back was:

Access to XMLHttpRequest at 'https://webhook.site/5c7a5049-9c5e-4bf7-b1cf-0e05f6503bfa' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

As the error states, the requested resource doesn't respond with any valid Access-Control-Allow-Origin header, which will prevent the POST itself from being fully executed. In webhook.site, you can select the CORS Headers tickbox from the top of the user interface to enable the service to send the proper CORS headers to get this working.

let xhr = new XMLHttpRequest();

xhr.open("POST","https://webhook.site/5c7a5049-9c5e-4bf7-b1cf-0e05f6503bfa",true); // configuration interface at https://webhook.site/#!/5c7a5049-9c5e-4bf7-b1cf-0e05f6503bfa/e14fc471-4bc4-410f-b16a-0755a231fb12/1

xhr.setRequestHeader("Content-Type", "application/json");

let data = JSON.stringify({'eventType' : 'test'});

xhr.send(data);

Legend! I actually also figured that removing the Content-Type header was also working, which is ultimately the way I will go as I've been meaning to send this data to Zapier :) Thanks for the investigation, I really appreciate it! — Yaniss Illoul, May 02 '22 at 16:14

score -2 · Answer 2 · answered May 02 '22 at 15:50

-2

I suggest you to use axios, it gonna be something like this and you will get the response from your post request

const response = await axios.post('https://webhook.site/4530328b-fc68-404a-9427-3f2ccd853066/', {'eventType' : 'test'});

answered May 02 '22 at 15:50

Artash Grigoryan

11
3

This does not adequately resolve the core issue of the CORS headers being misconfigured on the target resource. There's also absolutely no need to bring in another dependency. – esqew May 02 '22 at 15:52
To understand the CORS you don't need to be a js developer, there is already a bunch of response on [stackoverflow](https://stackoverflow.com/questions/25845203/understanding-cors), but for an newbie in js is more easyer to use an axios library, but if you don't want another dependency you can use `fetch` api. As mentioned [here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) `Fetch provides a better alternative that can be easily used by other technologies such as Service Workers` – Artash Grigoryan May 03 '22 at 09:41

POST Request with JSON Data in Javascript

2 Answers2