How change react port to API port?

Question

I have designed a login page to react. It is run on 3000 ports. After clicking the login button, it should go to the API port and check the userid and password have to account or not.

Screen shot

This is api call:

@RestController
@RequestMapping("/api")
public class UserController {

    @Autowired
    UserRepository userRepository;

    @GetMapping("/users")
    public List<Users> getAllUsers() {
        return userRepository.findAll();
    }

    @PostMapping("/users")
    public Users createUser(@Valid @RequestBody Users note) {
        return userRepository.save(note);
    }


    @PostMapping("/userlogin/{id}")
    public Users getUserById(@Valid @RequestBody UserLogin userLogin) {
        System.out.println(userLogin.getUserId());
        System.out.println(userLogin.getPassword());
        if (userLogin.getUserId() != null) {
            Users user = userRepository.findUserById(userLogin.getUserId());
            if (user != null) {
                if ((userLogin.getPassword()).equals(user.getPassword())) {
                    return user;
                }
            }
        }
        return new Users();
    }

}

This is React code to call api port:

public static saveLogin(input: any) {

var obj = JSON.stringify(input);
var url = '/api/userlogin/';
if (input.userId !== null && input.userId !== "") {
    url = '/api/userlogin/' + input.userId;

    const resultMethod = axios.post(url, obj,
        {
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(res => {

            return res;
        }).catch((e: any) => {

            return e.response;
        });
    return resultMethod;
}

The post method should call 8095 port but it is going in 3000 port.

Answer 1

axios require full api url.

url = 'http://localhost:8095/api/userlogin/' + input.userId;