React JS API Post Throws ERR_ABORTED 415

Question

Following Request in App.js gives net::ERR_ABORTED 415 when I'm trying to save some data in to a web service in my local machine

Browser Console

Browser Network Tab

App.js

import React, {Component} from 'react';

class App extends Component {
  async postData () {
    try {
      let result = await fetch('http://127.0.0.1:6060/jpa/save', {
        method: 'post',
        mode: 'no-cors',
        headers: {
          'Accept': 'application/json',
          'Content-type': 'application/json',
        },
        body: JSON.stringify({
          name: 'Switch5',
          state: '1'
        })
      });
      console.log(result)
    } catch(e) {
      console.log(e)
    }
  }
  render() {
    return (
      <div className="App">
        <button onClick={ () => this.postData() }>Press me to post some data</button>
      </div>
    );
  }
}

export default App;

Web service located in my local machine is working if I use postman

---

In addition to that, If I use webhook test API, its working fine

class App extends Component {
  async postData () {
    try {

      let result = await fetch('https://webhook.site/40336c89-decc-4abc-9e62-9181316a4c85', {
        method: 'post',
        mode: 'no-cors',
        headers: {
          'Accept': 'application/json',
          'Content-type': 'application/json',
        },
        body: JSON.stringify({
          key1: 'myusername'
        })
      });

Answer 1

I faced the same issue when I tried connecting my React application with spring boot service. To fix this issue just change the mode from no-cors to cors in your fetch and add @CrossOrigin annotation on your controller.

Hope it helps.

Answer 2

Managed to post with "axios"

Step 01: Added following to App.js

axios.post('http://127.0.0.1:6060/jpa/save', {
        name: 'Switch6',
        state: '1'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

Step 02: This was given cross origin issue. So added @CrossOrigin to Spring Boot Web service controller as follows

@RequestMapping("jpa")
public class JpaController {
    @Autowired
    private UserJpaRepository userJpaRepository;
    @CrossOrigin
    @PostMapping("save")
    public String saveUser(@RequestBody Switches user) {
        System.out.println("Request came");
        userJpaRepository.save(user);
        return "User Saved";
    }

Now its saving the data successfully

Answer 3

I think the issue is how you wrote the method to fetch the data. Edit the line where the postData method is being called. I only edited the first line of the postData call.

postData = async () => {
try {
  .....
} catch(e) {
  console.log(e)
}
}