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;
}

it seems that your auth serveur is not on the same domain as your front end application and you are facing CORS(Cross-origin resource sharing) problem. — JEY, Feb 27 '18 at 14:44
You cannot call the `/token` endpoint using XHR. It's supposed to be accessed from backend or a native application. — Ján Halaša, Feb 27 '18 at 14:45
Will you serve your angular application from spring too, or will users download scripts from some other domain? — Bunyamin Coskuner, Feb 27 '18 at 17:42

Bunyamin Coskuner · Accepted Answer · 2018-02-27T15:14:07.143

14

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.

edited Feb 27 '18 at 15:14

answered Feb 27 '18 at 14:52

Bunyamin Coskuner

8,719
1
28
48

that won't work if he is deploying this in production or on a server like apache or nginx – Mike Tung Feb 27 '18 at 15:03
If he is serving angular application from the same domain, it’ll work just fine. – Bunyamin Coskuner Feb 27 '18 at 15:05
assuming he uses webpack, it would work but if he was deploying this with some other than webpack then issue comes – Mike Tung Feb 27 '18 at 15:06
It is not about webpack. When you make request without mentioning the domain, it’ll make the request to the domain which serves the front end application. I’ve been doing the same thing with my project, and it works just fine – Bunyamin Coskuner Feb 27 '18 at 15:07
please see [link](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md) because you run `ng serve ` it uses webpack to run a development server to serve your angular application. Again if OP uses apache/nginx in a production setting this won't do. – Mike Tung Feb 27 '18 at 17:36
For me I had to add some more parameters to the config. See this answer: https://stackoverflow.com/a/42263440/5298706 – julienduchow Dec 05 '18 at 15:37
Special note: proxy setup for the current version of Angular (7 or 8) can be done without changing the start script in package.json. proxy.conf.json setup is the same however you can add [proxyConfig: "proxy.conf.json"] into the "serve/options" section of the angular.json file. See this link in Angular docs https://angular.io/guide/build#proxying-to-a-backend-server. – Jim Kennedy Jan 14 '20 at 18:54
Thanks a ton! This is by far the best answer with proper explanation and code example. THANK YOU! – Xonshiz Dec 12 '20 at 16:11

score 2 · Answer 2 · answered Feb 27 '18 at 14:44

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.

answered Feb 27 '18 at 14:44

Mike Tung

4,735
1
17
24

score 0 · Answer 3 · answered Mar 13 '19 at 14:17

0

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

Refer this

answered Mar 13 '19 at 14:17

Chintan Pandya

338
4
14

score 0 · Answer 4 · answered Apr 11 '20 at 20:22

0

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

answered Apr 11 '20 at 20:22

Mahmoud Hboubati

1,007
11
26

score 0 · Answer 5 · answered Apr 26 '20 at 16:16

0

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

answered Apr 26 '20 at 16:16

stan

809
9
18

score -1 · Answer 6 · answered Feb 27 '18 at 21:36

-1

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;
}

answered Feb 27 '18 at 21:36

Jose A. Matarán

1,044
3
13
33

Be careful though, you are allowing CORS which may result in security flaws. – Bunyamin Coskuner Feb 28 '18 at 06:48
Of course, this bean only apply in Development Enviroment – Jose A. Matarán Feb 28 '18 at 07:23
Check my answer, you would not need this bean even in development environment. – Bunyamin Coskuner Feb 28 '18 at 07:24
Using your proxy, Angular made a prefligth request and my backend block it. It answer don't work for me. – Jose A. Matarán Feb 28 '18 at 07:27

Angular HttpClient doesn't send POST, it sends OPTIONS

6 Answers6

Linked