Sending JSON Data with Javascript Post Request

I've been attempting to send a JSON payload via a JavaScript script, but my webhooks don't seem to recognize the payload no matter what I try.

Here is the code that I compiled from various online resources:

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

Although I'm not well-versed in JavaScript development, it appears to me that this code should work. However, whenever I run this snippet, the POST URL doesn't provide any response back :/

Any thoughts on why this might be happening? :)

Thank you for your attention!

javascriptjsonrequest

Answer №1

It seems that the webhook.site service you are trying to connect to using your JavaScript code does not have the necessary CORS headers enabled by default. These headers are essential for ensuring proper security measures on modern browsers. If you check the developer console in your browser, you may see an error message similar to this:

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.

This error indicates that the requested resource does not include a valid Access-Control-Allow-Origin header, which prevents the POST request from completing successfully. To resolve this issue, you can enable the CORS Headers option in the webhook.site user interface. This will ensure that the proper CORS headers are sent, allowing your code to work correctly.

let xhr = new XMLHttpRequest();

xhr.open("POST","https://webhook.site/5c7a5049-9c5e-4bf7-b1cf-0e05f6503bfa",true);

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

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

xhr.send(data);

Answer №2

If you want to make a post request, I recommend using axios. Here is an example of how to do it:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to setting up parameterized routes in GatsbyJS

I am looking to implement a route in my Gatsby-generated website that uses a slug as a parameter. Specifically, I have a collection of projects located at the route /projects/<slug>. Typically, when using React Router, I would define a route like t ...

javascriptreactjsgatsby

Automate the input provided to yeoman command line interface for implementing CI/CD tools

When executing Yeoman, it prompts for input one by one. Is there a way to provide all inputs at once or programmatically? For instance: yo azuresfguest It requests 5 inputs to be added, which I would like to provide in one go for running in a CI/CD syst ...

javascriptnode.jsnpmyeoman

An error occurred when trying to convert a com.google.gson.JsonObject to a com.google.gson.JsonArray

I am encountering an issue with parsing a JSON response. Here is the response data: { "deal": { "categorie": { "description": "Offres Shopping", "idcategorie": "1", "nom": "Shopping" }, "cond ...

jsoncastingarrays

What is the most efficient way to refresh a React component when a global variable is updated?

I've built a React component called GameData that displays details of a soccer game when it is clicked on in a table. The information in the table is updated by another component, which changes a global variable that GameData relies on to show data. S ...

javascriptreactjsmaterial-uimui-x-data-grid

The pre tag does not have any effect when added after the onload event

I have been experimenting with a jQuery plugin for drawing arrows, detailed in this article. When using the plugin, this code is transformed: <pre class="arrows-and-boxes"> (Src) > (Target) </pre> into this format: Src --> Target The is ...

javascriptjquerycsspre

If the variable is not defined, then utilize a different one

There are two scopes: $scope.job and $scope.jobs. I also have a variable called job; If $scope.job is undefined, I want $scope.jobs to be assigned to the job variable using the following code: var job = $scope.jobs. However, if $scope.job is defined, the ...

javascriptangularjs

How to display JSON data in a table using UI5

I am encountering an issue while trying to display JSON data in UI5. I have successfully loaded the data and can access it to show in individual fields, such as a text view. However, I am facing problems when attempting to display the data in a table. Her ...

jsonsapui5

Converting string patterns to regular expressions

I am utilizing mongodb to store data. My requirement is to save complete regular expressions as strings: { permissions: [{ resName: '/user[1-5]/ig', isRegex: true }] } Although I am aware of the existence of the module mongoose-rege ...

javascriptregexnode.jsmongodb

How can the syntax of a JSON file be verified in Unix?

How can I verify the syntax of a JSON file in Unix and then automatically move any invalid files into an error folder? Thank you, Kavin ...

jsonunixjson-schema-validatorjsonparser

Designing a slider to display a collection of images

I am currently working on a slider project using HTML, javascript, and CSS. I'm facing an issue where only the first two images (li) are being displayed and it's not transitioning to the other (li) elements. Below is the HTML code snippet: <se ...

javascriptcsshtml

Showing hidden errors in specific browsers via JavaScript

I was struggling to make the code work on certain browsers. The code you see in the resource URL below has been a collection of work-around codes to get it functioning, especially for Android browsers and Windows 8. It might be a bit sketchy as a result. ...

javascriptandroidjqueryhtml

Improperly aligned rotation using tween.js and three.js

Utilizing three.js and tween.js, my goal is to develop a Rubik's cube made up of 27 small cubes grouped together for rotation by +Math.PI/2 or -Math.PI/2. To ensure smooth rotation, I am implementing the tween library. The specific issue I encounter ...

javascriptrotationthree.jstween

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

javascriptjquerycss

retrieving json data in Bukkit

I'm having trouble retrieving my JSON data in my plugin. Despite using the code snippet static File json = new File("config.JSON"); to set up the file path, I am unable to access it using the GetDataFolder() method due to the constraints of ...

javajsonbukkit

Harvest Keenio Information and Transfer it to a Google Sheet

My current setup involves using ImportJSON to import data from Sendgrid Email via the Keenio Extraction Query API URL by calling the ImportJSON function within a Google Spreadsheet cell on Sheet DATA. =ImportJSON("https://api.keen.io/3.0/projects/"& P ...

jsongoogle-apps-scriptgoogle-sheetssendgridkeen-io

Changing the story in javascript

I am trying to customize the legend to display the following values: 80+ (or 80%+) 75-80 70-75 65-70 60-65 55-50 <50% While I have organized the list in descending order, I seem to be facing an issue with getting the less than symbol to function correct ...

javascriptlist

Employing distinct techniques for a union-typed variable in TypeScript

I'm currently in the process of converting a JavaScript library to TypeScript. One issue I've encountered is with a variable that can be either a boolean or an array. This variable cannot be separated into two different variables because it&apos ...

javascripttypescript

Issue with React sending a Get request to a Node server using Express

Here is a snippet of code from my React app where I am trying to retrieve data from my database based on a value that is passed. Let's start by examining the section of code that may be causing an issue: Within one of my forms, there is a function th ...

javascriptnode.jsreactjspostgresqlexpress

What could be causing anime.js to malfunction when clicked in Vue.js?

After implementing the mounted() function, the animation now successfully plays when the page is updated. However, there seems to be an issue as the animation does not trigger when clicked. Even though console.log registers a click event, the animation fa ...

javascriptvue.jsanimationanime.js

Tips for implementing event.preventDefault() with functions that require arguments

Here is a code snippet that I'm working with: const upListCandy = (candy) => { /* How can I add event.preventDefault() to make it work properly? */ axios.post("example.com", { candyName: candy.name }).then().ca ...

javascriptreactjseventsevent-handlingpreventdefault