Submitting JSON data using JavaScript

My goal is to send a username and password to my backend server. However, I am encountering an issue where the data does not successfully reach the backend when using the following code:

function register() {

  var text = '{"username":"admin1","password":"1234"}';

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://localhost:8087/meetmeserver/api/admin/register", true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  xhr.send(JSON.stringify(text));

}

Interestingly, if I omit the line containing xhr.setRequestHeader, the data reaches the backend but triggers an exception...

I am stuck at this point and would greatly appreciate any assistance in identifying the problem. Please let me know if you require additional code samples.

javascriptjsonpostrequest

Answer №1

I managed to find a solution on my own. The issue was that my backend and frontend were both running on localhost, but on different ports. The browser's security settings were blocking this communication.

For more information on this problem, check out this link: "No 'Access-Control-Allow-Origin' header is present on the requested resource"

Additionally, here is the improved version of my javaScript function... :) 

$.ajax({
    url: 'http://localhost:8087/meetmeserver/api/admin/register',
    type: 'POST',
    data: JSON.stringify(json),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    async: false,
    success: function(msg) {
        alert(msg);
    }
});

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

What is the best way to transform an array of objects into MenuItems for a Material-UI Select component?

I am facing an issue with mapping the values of field choices to create options for an MUI Select field from an array called fieldChoices. Here is how I populate the fieldChoices array: fieldChoices = { choices: filtered_status.map(function (item) { ...

javascriptarraysmaterial-ui

What is the best way to ensure the network is idle after clicking on an element in puppeteer?

Is there a way to wait for network idle after clicking on an element in puppeteer? const browser = await puppeteer.launch({headless: false}); await page.goto(url, {waitUntil: 'networkidle'}); await page.click('.to_cart'); //Clicking o ...

javascriptnode.jspuppeteer

Exploring the idea of how a Node.js server works

Although I have a good understanding of jQuery, I am new to modern JavaScript frameworks that have been introduced in the past few years. In the example provided, I can see how index.html functions and how server.js handles requests from it. However, I am ...

javascriptnode.js

How to handle duplicate keys in JSON parsing using Python3

Excuse my lack of experience in this area, but there's a json response that looks like this; import json jsonObj = json.loads(""" { "data": [ { "name_space": "name", "value": &q ...

jsonpython-3.xparsingduplicateskey-value

Unable to assign value to Ref data property in Vue3 due to undefined item

Recently, I've been utilizing Vue3 and Nuxt3 to work on a project. My main task involves extracting the :id parameter from the URL and checking if it matches an ID in a JSON file. If there is a match, I update a reference data point called 'exist ...

javascriptvue.jsnuxt.js

Two-way data bindings trigger the digest() function to iterate 10 times

I'm facing issues with angular binding and my experience level in this area is limited. I will be posting all related questions here. I have a piece of angularjs code that is triggering 10 digest() cycle reached errors. After researching similar posts ...

javascriptangularjsangularjs-digesttwo-way

Master the art of manipulating tags in Django templates using JavaScript

In my Django quiz app, there are two main components. The first part involves displaying 10 sentences with corresponding audio to help with memorization, one per page. The second part consists of asking questions based on the same set of sentences. I initi ...

javascriptpythonhtmldjango

Exploring the functionality of Google Drive API with JPlayer

I'm currently exploring the possibilities of creating an app that can play music from Google Drive using Jplayer. I have successfully installed Jplayer on index.jsp, but I am unsure of how to effectively interact with it or where in the code I need to ...

javascriptgoogle-drive-apijplayer

Creating a classification for a higher order function

In the code snippet below, I have a controller that acts as a higher order method: const CourseController = { createCourse: ({ CourseService }) => async (httpRequest) => { const course = await CourseService.doCreateCourse(httpRequest. ...

javascriptjsdoc

Is it possible for a user to change the data stored in sessionStorage variables?

Incorporating client-side JavaScript into my project to save certain variables using Web Storage - specifically, the sessionStorage. However, uncertainty exists regarding whether a user holds the capability to alter these variable values. If this is indee ...

javascripthtmlsession-storageweb-storage

Guide: Implementing Vuex store within a plugin

I recently developed a custom Vue plugin which includes a customized instance method import Echo from 'laravel-echo'; import Vue from 'vue'; import config from '@/config'; const echor = { install(Vue){ Vue.prototy ...

javascriptvue.jsvuejs2vuex

Asynchronous setTimeout for server-side operations

I am currently facing an issue with my web server. Whenever a request is made, the server initiates a phone call, waits for 3 seconds, and then checks if the call is still ongoing. I have utilized setTimeout to achieve this functionality, but it seems to b ...

javascripthttpexpresswebtimeout

Developing a React Native app using Expo and Firebase? Learn how to prevent Firebase details from

I have encountered a problem with my code while working on the user edit profile page in my react native app. The issue I am facing is related to displaying the previously inputted firebase details from the collection in the text input fields when the user ...

javascriptfirebasereact-nativegoogle-cloud-firestoreexpo

Bidirectional data binding in Vue.js enables seamless communication between parent and child components, allowing for dynamic

Trying to implement v-for and v-model for two-way data binding in input forms. Looking to generate child components dynamically, but the parent's data object is not updating as expected. Here's how my template is structured: <div class="cont ...

javascriptvue.jscomponentsvuejs2vue-component

Downloading files from a Blob in NodeJS: A step-by-step guide

How do I retrieve a file from a BLOB column using NodeJS? Currently, I am utilizing the oracledb library for database operations and my code snippet is as follows: async function getFile(req, res) { let filename = req.params.filename; let file = a ...

javascriptnode.jsexpressnode-oracledb

The function screen.getByText is not available in this context

My experience with jest and react-testing-library has been smooth for the most part, but I encountered some challenges when transitioning to the screen > getByText/etc testing method. Test describe('test the dashboard when loaded', () => { ...

javascripttypescriptjestjsreact-testing-library

What is the best way to transfer a multidimensional array from PHP to JavaScript?

Attempting to extract array value from a JSON string, I utilize the json_decode function in PHP. <?php $jsonContent=file_get_contents('http://megarkarsa.com/gpsjson.php'); $jsonDecoded=json_decode($jsonContent,true); foreach($jsonEncoded[&apo ...

javascriptphparraysjsonmultidimensional-array

Do JSON objects and DTOs share the same characteristics?

Is there a distinction between JSON objects and DTOs (data transfer objects), or are they essentially the same thing? When working with a REST architecture, HTTP requests from the client can be sent as JSON data and then deserialized into CLR objects on th ...

jsondto

Exploring Clara.io's json data for 3D geometry within the Three.js

I've encountered an issue with exporting models in Clara.io. According to their instructions, exporting a selection should create a file for JSONLoader and exporting the full scene should result in a file for ObjectLoader. However, none of the export ...

javascriptjsonthree.js

Styling the button in jQuery to switch between disabled and enabled

I'm currently working on creating a disabled/enable button style using jQuery. You can check out my demonstration page on Codepen for reference. In the demo, you'll notice a blue submit button. When you input text into the field, the button bec ...

javascriptjquerycss