React and Springboot : axios requests not shown in browser devtools

Question

I'm trying to follow a tutorial on React(frontend) and Springboot(backend) and I face a little problem when making an http POST request with Axios on Mozilla and Chrome. I try to post some data to a REST api that I set up and save it in an H2 in-memory database. If I use an HTTP client like Postman, it works fine but when I use a web browser as a client, here are some issues :

On Chrome, when I submit the form, I don't see any trace of the triggered request in the Network tab of the console while the data is saved in the database. I also have this browser error message when I run my React client :

On Firefox, the request doesn't hit my rest controller endpoint and no data is persisted. But I get this error message

I configured my CORS, checked proxy config in package.json but I don't get what the issue is.

my http post method called from my form component when submitted

import axios from 'axios';

const API_URL = 'http://localhost:8080/api/v1';

export const signup = (user) => {
    const headers = {"Accept": "application/json", 'Content-Type': 'application/json'};
    return axios.post(API_URL + '/auth/signup', user, {headers})
    .then(res => console.log(res));
};

my package.json

{
  "name": "project-frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.4",
    "@testing-library/user-event": "^12.6.3",
    "axios": "^0.21.1",
    "http-proxy-middleware": "^2.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

My rest controller

package com.project.project.auth;

import com.project.project.shared.HttpResponse;
import com.project.project.user.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.logging.Logger;

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/api/v1/auth")
public class AuthController {

    @Autowired
    private AuthService authService;

    public Logger logger = Logger.getLogger(Logger.GLOBAL_LOGGER_NAME);

    @PostMapping("/signup")
    public HttpResponse signup(@RequestBody User user) {
        logger.info("AUTH_CONTROLLER : I'am in signup method");
        authService.save(user);
        HttpResponse response = new HttpResponse("User saved succesfully !");
        return response;
    }
}

React and Springboot : axios requests not shown in browser devtools

0 Answers