CODEWITHSUNDEEP
javaangularauthenticationspring-security
Roxana
Roxana

Reputation: 9

'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check:

I have a project in java,angular with mysql database.
I followed a tutorial to make the login page. I did exactly as there but it doesn't work for me. The login page is at /api/authenticate. At /api/user I have the list of users and a button to add a new user and a login button. This page is to see how it works, it has no use. the problem is that I get these 3 errors. It works in postman, but not in the frontend. it also works when I go directly to http://localhost:8083/api/authenticate (it appears "login") enter image description here

    @Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http
            .csrf(csrf -> csrf.disable()) // Dezactivează CSRF
            .authorizeRequests(authorizeRequests ->
                    authorizeRequests
                            .requestMatchers("/api/users", "/api/user/**","/api/authenticate").permitAll() // Permite accesul la aceste endpoint-uri
                            .anyRequest().authenticated() // Orice altă cerere necesită autentificare
            )
            .formLogin(formLogin ->
                    formLogin
                            .loginPage("/api/authenticate")
                            .loginProcessingUrl("/api/authenticate")
                            .defaultSuccessUrl("/api/users", true)
                            .permitAll()
            )
            .logout(logout ->
                    logout
                            .invalidateHttpSession(true)
                            .clearAuthentication(true)
                            .logoutRequestMatcher(new AntPathRequestMatcher("/api/logout"))
                            .logoutSuccessUrl("/api/authenticate")
                            .permitAll()
            );

    return http.build();
}

this is the sequence from java

@RestController
@RequestMapping("/api")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:4200")
public class UserController {.........

  @GetMapping("/authenticate")
    public String authenticate(Model model, User user) {
        model.addAttribute("USER", user); // corectare: adăugăm atributul în model
        return "login"; // returnăm numele view-ului (login.html)
    }

I tried to solve it without the encrypted password, initially I thought that the encryption was not ok, but it seems not

I want when I click on login to take me to /api/users or a new page, but at the moment I want to know how I can solve the 3 errors

Upvotes: 0

Views: 95

Answers (1)

Robert
Robert

Reputation: 49

For a bit of context you might want to read about the CORS policy for a better understanding of the error. As a summary, the browser is trying to protect you from a potential attack, because it considers that a requests that is not coming from the same origin might be a potential attack.

A simple example: You logged in your bank account web platform and you have your auth security token saved in browser memory. Now you enter on a shady website, which might have a method triggered in the background which tries to call your bank api with your stored auth token. In this situation, it could call the api for sending an amount of money lets say. Obviously, in reality there are more security steps along the way, but you get the idea. By having CORS policy, the browser is blocking this kind of attacks, forcing an http request to be from the same origin.

Now, there are some ways of going around this behaviour. In Angular, you can configure a proxy which basically replaces the API url you are calling with your angular app url origin. Therefore, a request like your: http://localhost:8083/api/authenticate will be translated by the proxy to this http://localhost:4200/beUrl/authenticate, where localhost:4200 is the local url for angular. Now, the http call is from the same origin as the app.

An example of this kind of proxy config in Angular:

proxy.conf.json

{
  "/api": {
    "target": "http://localhost:8083/api", // your be api url
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

And you need to let angular know about this proxy, by adding this to you angular.json config file under architect/serve property:

    "serve": {
      "options": {
        "proxyConfig": "proxy.conf.json"
      },

For more details about CORS policy and this proxy strategy please read the following resources: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://angular.dev/tools/cli/serve#proxying-to-a-backend-server

Upvotes: 0

Related Questions