Consistently encountering issues when attempting to submit JSON data via POST request (body in raw format

I'm facing an issue with sending data to my server. Currently, I am working on a project using react native and axios version ^0.16.2.

let input = {
  'longitude': -6.3922782,
  'latitude': 106.8268856,
  'content': 'uget - uget sampai kaki lemes',
  'pictures': []
}

axios({
  method: 'POST',
  url,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': this.state.headers.authorization
  },
  data: input
})                                                                     
.then((resultAxios) => {
  console.log('hasil axios', resultAxios)
})

However, the status result consistently shows error 500.

When I try to send data using Postman, everything works perfectly fine. In Postman, I configure it as follows:

headers: {
  Authorization: ''',
  Content-Type: application/json
}

body = raw, JSON

Does anyone have any suggestions on how to resolve this issue? Thank you :)

javascriptreact-nativeaxios

Answer №1

@Davide

Yes, indeed. I also encountered a bug in Axios...

The errors I came across were related to CORS preflight errors, which were unrelated to the actual issue.

** BUG **

Axios({
method: "post",
url: "https://localhost:44394/EXAMPLE/",
data: jsonPayload,
headers: { "Content-Type": "application/json" }
})

** FIXED **

Axios({
method: "post",
url: "https://localhost:44394/EXAMPLE/",
data: JSON.Stringify(jsonPayload),
headers: { "Content-Type": "application/json" }
})

Answer №2

While experimenting with axios, I came across a JSON processing issue when sending data in the request body. Here is a workaround to try:

let input = 'longitude=-6.3922782&latitude=106.8268856&content="uget - uget sampai kaki lemes"&pictures=[]';

  axios({
    method: 'POST',
    url,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': this.state.headers.authorization
    },
    data: input
  })                                                                     
  .then((resultAxios) => {
    console.log('axios result', resultAxios)
  })

However, the status always returns an error code of 500.

Sending the same data through Postman works without any issues. In Postman, make sure to set the following:

headers: {
  Authorization: ''',
  Content-Type: application/json
}

body = raw, JSON

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

How can you ensure that it selects a random number to retrieve items from an array?

I am experiencing an issue with some code I wrote. Instead of displaying a random object from the array as intended, it is showing the random number used to try and display an object. <html> <body> <h1>HTML random objects< ...

javascripthtml

Navigating through Sails.js: A comprehensive guide on executing test cases

Being a beginner in sails, node, and js, I may be missing out on some obvious steps. My environment includes sails 0.10.5 and node 0.10.33. Although the sails.js documentation covers tests in , it does not provide instructions on how to actually execute ...

javascriptnode.jsunit-testingsails.jsmocha.js

How come WhatsApp is not recognizing my og:tags correctly?

I'm having an issue with my webpage where the og:tags generated for link previews on Facebook work fine, but they can't seem to be scraped by WhatsApp. Even though the tags are correct in the source code of the site, WhatsApp shows an error messa ...

javascripthtmlfacebook-opengraphwhatsappshare-open-graph

Enhancing Accessibility of the 'Return to Top' Link

Currently, I am designing a web page that requires users to scroll extensively. To enhance the user experience, I have included a back-to-top link at the bottom of the page for easy navigation back to the top. This is the HTML markup I have implemented: ...

javascripthtmlcssaccessibility

Error with REST service and browser history in ReactJS

I am currently developing my first Java application, which is a REST service built with Spring Boot. It utilizes technologies such as WEB, REST, JPA, Thymeleaf, and MySQL. The API is fully functional, but I wanted to enhance it with a user interface. After ...

javascriptjavarestreactjsreact-router

I'm encountering an issue where the database table in Postgres is not updating correctly while working with Node

Currently, I am working on a CRUD application where I can successfully read and delete data from the database table. However, I have encountered an issue when trying to update specific data for a particular route. Every time I attempt to update the data in ...

javascriptnode.jspostgresqlexpress

Issue with Angular 12 service worker causing SW update to fail

I'm currently working on integrating a service worker into my Angular application to enable updates without user intervention. Here is the step-by-step process that I am following: Make changes to the application Run ng build Start an HTTP ser ...

javascriptangularservice-workerangular12

Is there a way to navigate to a specific div when clicking on it?

Need help with scrolling after running code function scrollFunction() { document.getElementById('insert').scrollIntoView(); } I have a button that triggers some code and I want the page to scroll afterwards. Currently, it scroll ...

javascripthtmlasp.netvb.net

React Native error - Numeric literals cannot be followed by identifiers directly

I encountered an issue while utilizing a data file for mapping over in a React Native component. The error message displayed is as follows: The error states: "No identifiers allowed directly after numeric literal." File processed with loaders: "../. ...

typescriptreact-native

Error encountered while using Chart.js with JSON dataset

Struggling to make this work... Here are the necessary scripts: <script src="Chart.js"></script> <script src="jquery-1.11.3.min.js"></script> This is the full code I am working with: <body> <div id="chartCanvas"> &l ...

javascriptjqueryjsonchart.js

Typescript - Conditional imports

When working with the moment-timezone module, one issue that arises is receiving a warning if it is included multiple times. In my specific case, I have a module that necessitates the use of this timezone functionality. Since I am unsure whether or not the ...

javascripttypescript

The jQuery window.on event is not functioning when trying to handle the same hash change

How to fix jQuery window.on hashchange issue when clicking on the same hash? See the code snippet below for a potential solution: function addMargin() { let header = $('.header__wrapper').outerHeight(); let headerHeight = $('body& ...

javascriptjquery

AngularJS fails to recognize Iframe element during REST request

I'm having trouble with my webpage only reading the Iframe tag. It's sending the content correctly according to Postman. Postman is giving me this content: "Conteudo": "<p>Test iframe:</p>\n\n<p><iframe framebord ...

javascriptangularjsrendering

Finding your way to a particular section within a webpage through an external source

Hey there! I'm currently working on creating a link that will direct users to a specific section within my webpage. For example, redirecting them to https://blabla.github.io/my-website. My code is quite straightforward and it functions properly when ...

javascripthtmlhref

Determining the depth difference of nodes between two elements using JQuery

Is there a simple method to calculate the node depth difference between 2 elements? Example : <div id="1"> <div id="2"></div> <div id="3"> <div id="4"></div> </div> </div> <div id="5"></d ...

javascriptjquery

Searching for a specific word within a given string using a loop

Currently, I'm developing a 'for' loop to search for my name, Andrew, in a given text and store the occurrences in an array. However, there seems to be an issue with the implementation. /*jshint multistr:true */ var text = ("Andrew is real ...

javascript

Placing a component within a .jsx file instead of utilizing a .css file for positioning

Seeking a way to position a component within a .jsx-file, rather than a .css-file, to accommodate multiple instances of the same component performing various tasks on different parts of the page. Avoiding duplication of files with minor CSS class changes, ...

javascriptcssreactjspositioncss-position

Why isn't my Vue2 data updating in the HTML?

Starting my journey with Vue, I have been finding my way through the documentation and seeking support from the Vue community on Stack Overflow. Slowly but steadily, I am gaining a better understanding of how to create more complex components. The issue I ...

javascriptvue.jsvuejs2vue-component

Exploring discrepancies in JSON arrays using Lodash

Using lodash to find the difference between two arrays: c1Arr contains: [ { varName: 'city', varValue: 'cccccccc' }, { varName: 'country', varValue: 'dddddddd' } ] c2Arr contains: [ { varName: 'abc', ...

javascriptjsonlodasharray-difference

Unnecessary Page Diversion

Within my index.php file, I have a download button with the id of "render". Using AJAX, I am sending a request to the server. The JavaScript code being utilized is as follows: $('#render').click(function(e){ $('html,body').animat ...

javascriptphpjqueryajax