0

im developping a back-end with the Spring framework. My frontend is written using the Angular framework. My GET requests are being blocked by the CORS policy.

When i make a request to a GET resource with the following angular function:

authenticate(credentials, callback) {

        const headers = new HttpHeaders(credentials ? {
            authorization : 'Basic ' + btoa(credentials.username + ':' + credentials.password)
        } : {});

        this.http.get("http://localhost:8080/user", {headers: headers}).subscribe(response => {
          console.log(response);
          console.log(this.authenticated);
            if (response['name']) {
                this.authenticated = true;
            } else {
                this.authenticated = false;
            }
            return callback && callback();
        });

    }

I get a failed request in my Network tab. Depending on my security config, i also sometimes get a 401 but in both cases i'll get the "blocked by cors" message in the console.

This is the Controller the request is being sent to:

@CrossOrigin(origins = "*", allowedHeaders = "*")
@RestController
public class AuthorizationController {

    @CrossOrigin(origins = "*", allowedHeaders = "*")
    @RequestMapping("/user")
        public Principal user(Principal user) {

        System.out.println(user);
            return user;
        }

    }

Here is my Spring security configuration:

 @Override
    protected void configure(final HttpSecurity http) throws Exception {
              http.httpBasic()
                      .and().authorizeRequests().antMatchers("/**").permitAll()
                      .anyRequest().authenticated();

    }

Note: this would not be my preferred configuration. I'm using this because it's the only way i get something to work. With this configuration, my POST requests are working. However, the GET request i describe earlier on does not work with this configuration.

Any tips or help would be appreciated, let me know if you need any further information about my code.

0

1 Answer 1

0

CORS works in a browser. Do the same action with Postman and it should be successful(if Java code is correct).

Do you have an angular proxy set up and running? Seems not, cause you call API directly with the domain name

Check out how to enable and use the proxy https://angular.io/guide/build#proxying-to-a-backend-server

6
  • Why does it matter if i call the API directly? Ive never heard about it before, the tutorial ive been following is: spring.io/guides/tutorials/spring-security-and-angular-js i dont think they use one there? Thanks for your help.
    – dbr
    Dec 3, 2020 at 21:03
  • you call direct this.http.get("localhost:8080/user" and via proxy, you would need to call just this.http.get("user" and with proxyConfig(like in my tutorial), your app would see that /user goes to that localhost and would omit proxy Dec 3, 2020 at 21:19
  • configuring the proxy server did the trick. However I was wondering, should this technically be possible to achieve with pure Spring security configuration aswell?
    – dbr
    Dec 4, 2020 at 2:00
  • as I said - you did everything right, but the browser does CORS to secure you, so this step is needed. If you would try to use Postman(google it) it would work without CORS and without proxy. Also, google for "CORS in Chrome", maybe they would give a more detailed explanation :) Dec 4, 2020 at 6:33
  • I understand, it more now, I just thought it was vague because the tutorial i followed was so "step-by-step" that I pretty much assumed it wouldnt skip over something like this, Thanks for the help
    – dbr
    Dec 4, 2020 at 8:32

Not the answer you're looking for? Browse other questions tagged or ask your own question.