Angular HttpClient doesn't send POST, it sends OPTIONS

Question

Im' newbie using Angular HttpClient (and writting english too)

I have a problem, I'm trying sending HTTP request with POST method in order to negociate OAuth token obtenction but angular sends OPTIONS request:

Service:

login(username: string, password: string) {
const body = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&grant_type=password`;

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Basic ' + btoa(TOKEN_AUTH_USERNAME + ':' + TOKEN_AUTH_PASSWORD)
  })
};  


return this.http.post<string>(AuthenticationService.AUTH_TOKEN, body, httpOptions);

Result:

For my backend, I'm using Spring Security and i added a filter to allow CORS:

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(0);
    return bean;
}

Answer 1

It is not angular related, it is your browser doing.

Check this issue.

I assume your server runs at localhost:8080, and your angular application at localhost:4200. Since, your request is a cross origin request, browser first sends an OPTIONS request to see if it is safe. At this point, your server returns a response with http code 401 which prevents the post request from being made. Either you have to do some config in your server or you can use webpack proxy. This is just for your local machine. If you serve your bundled angular application from your server, then you won’t have to do anything for production. I’ve been using this technique for quite some time, and it works just fine.

Example,

Users access my angular application from mydomain.com/ng-app I also serve my rest api from same domain, mydomain.com/api

So my application always make the request to the server it’s being served from which causes no problem in production.

For latter, you can do following

Create a proxy.conf.json at the root of your project (next to package.json) And put following inside

{
    "/api/": {
        "target": "http://localhost:8080",
        "secure": false,
        "changeOrigin": true
    }
}

In package.json, edit your start script and make it ng serve --proxy-config proxy.conf.json

Also, from your frontend, do not send the requests to localhost:8080 directly, instead just write something like http.post('/api/getSomeData') which will make the request to localhost:4200 which will redirect it to localhost:8080. This way, you won't have to deal with CORS.

Answer 2

The OPTIONS request is sent first because of CORS, Angular needs permission from your backend in order to know if it can POST. So on your backend you need to enable CORS in order for the http request to go.

Answer 3

For spring boot application, to enable cors request, use @CrossOrigin(origins = "*", maxAge = 3600) on your respective controller.

Refer this

Answer 4

use angular cli configuration https://angular.io/guide/build#proxying-to-a-backend-server

Answer 5

With a NestJS/Express backend, I fixed this by enabling CORS: https://docs.nestjs.com/techniques/security#cors

Answer 6

Finally I found the mistake. The order of the Filter there weren't correct. I adjusted it to Ordered.HIGHEST_PRECEDENCE this way it override Spring filter.

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
    return bean;
}