Example code for Login/Registration Operation 👇

import React, { useState } from 'react';
import axios from 'axios';

const LoginComponent = () => {
  const [credentials, setCredentials] = useState({ username: '', password: '' });

  const handleChange = (e) => {
    setCredentials({
      ...credentials,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('<https://api.example.com/login>', credentials, {
	    headers:{
	    "Content-Type":"application/json"
	    },
      withCredentials: true // Includes cookies with the request
    })
      .then(response => {
        // Handle successful login
        console.log('Login successful:', response.data);
        
      })
      .catch(error => {
        // Handle login error
        console.error('There was an error logging in:', error);
      });
  };

  return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="username"
          value={credentials.username}
          onChange={handleChange}
          placeholder="Username"
        />
        <input
          type="password"
          name="password"
          value={credentials.password}
          onChange={handleChange}
          placeholder="Password"
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

export default LoginComponent;

CORS Configuration 👇

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**")
               .allowedOriginPatterns("<http://localhost:5173>")
               .allowCredentials(true)
               .allowedHeaders("*")
               .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}