Question 271052 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why my login endpoint can't be accessed by any request?

So, my friend has a problem with her login page. When she tries to make a request to her api, it just makes an error in the front-end and in the api nothing happens.

This is the error that appears on the console:
Access to XMLHttpRequest at ‘http://localhost:8082/login’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
AuthenticationService.js:10 AxiosError {message: ‘Network Error’, name: ‘AxiosError’, code: ‘ERR_NETWORK’, config: {…}, request: XMLHttpRequest, …}

This is the login endpoint

@Controller
@CrossOrigin(
    origins = "http://localhost:3000",
    allowCredentials = "true"
)
@RequestMapping("/login")
public class AuthenticationController {

@Autowired
AuthenticationManager authenticationManager;

private static final Logger logger = LoggerFactory.getLogger(AuthenticationController.class);

@PostMapping
public ResponseEntity<?> login(
        @RequestBody Login login,
        HttpServletRequest request,
        HttpServletResponse response
){
    logger.debug("Received login request for username: {}", login.getUsername());
    System.out.println("AuthenticationCOntroller");
    SecurityContextRepository securityContextRepository = new HttpSessionSecurityContextRepository();
    UsernamePasswordAuthenticationToken token =
            new UsernamePasswordAuthenticationToken(login.getUsername(), login.getPassword());
    Authentication authentication = authenticationManager.authenticate(token);

    if(authentication.isAuthenticated()){
        User user = (User) authentication.getPrincipal();
        Cookie cookie = CookieUtil.generateCookie(user);
        response.addCookie(cookie);
        return ResponseEntity.ok(authentication.getPrincipal());
    }
}

This is her github links:
API
Front-end

She tried to refactor all her code and it still gets an error doing login.

Tags:

2

Answers


  1. 0

    the error message is self-explanatory. It is a CORS error. You need to configure the api side to include the Access-Control-Allow-Origin header in its responses. The value of this header should be the origin of the requesting site, or * to allow any origin.

    Login or Signup to reply.
  2. 0

    I may have the solution!
    In your AuthenticationManager you have two methods to configure cors.
    You can have only one:

    @RestController
@CrossOrigin(origins = "*")
@RequestMapping("/login")
public class AuthenticationController {
@Autowired
AuthenticationManager authenticationManager;

@PostMapping
public ResponseEntity<?> login(
        @RequestBody Login login,
        HttpServletResponse response)
{

    SecurityContextRepository securityContextRepository = new 
HttpSessionSecurityContextRepository();
    UsernamePasswordAuthenticationToken token =
            new UsernamePasswordAuthenticationToken(login.getUsername(), 
login.getPassword());
    Authentication authentication = authenticationManager.authenticate(token);

    if(authentication.isAuthenticated()){
        User user = (User) authentication.getPrincipal();
        Cookie cookie = CookieUtil.generateCookie(user);
        response.addCookie(cookie);
        return ResponseEntity.ok(authentication.getPrincipal());
    }

    return ResponseEntity.status(401).build();

}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search