HttpClient.post request becomes OPTIONS when setting custom Headers.

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

This request is send using the OPTIONS method, as seen in logs: Request URL: url Request method: OPTIONS Remote address: ip address Status code: 405 Version: HTTP/1.1

Request Headers - RAW:

Host: url User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate Access-Control-Request-Method: POST Access-Control-Request-Headers: access-control-allow-origin,pace-useragent Origin: http://localhost:8100 Connection: keep-alive Cookie: sessionId=value; realm=PTPL

Expected behavior

Cookie: sessionId=value; realm=PTPL pace-useragent: rest Host: url User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 Accept-Language: en-US,en;q=0.5 Origin: http://localhost:8100 Connection: keep-alive

Minimal reproduction of the problem with instructions

let cookie = "sessionId=xxzzxzxzx;realm:PTPL";
let apiHeader = new HttpHeaders();
let contentType = apiHeader.append('Content-Type', 'application/x-www-form-urlencoded');
let aControl = contentType.append('Access-Control-Allow-Origin', '*');
let pace = aControl.append('pace-useragent', 'rest');
let hCookie = pace.append('Cookie', cookie);

let param = new URLSearchParams();
    for (var key in data) {
        param.append(key, data[key]);
    }

    return new Promise((resolve, reject) => {
      this.http.post(url, param.toString(), { headers: apiHeader, withCredentials: true }).subscribe(res => {
        resolve(res);
      }, (error: HttpErrorResponse) => {
        reject(error);
      });
    });

This should be POST request.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.2.6


Browser:
- [x] Chrome (desktop) version 62.0.3202.94
- [x] Firefox version 57.0.1
 
For Tooling issues:
- Node version: 8.9.1
- Platform:  Mac OS 10.12.6

Others:

[mlc-mlapis]

@hardik-ajmeri … to avoid an automatic CORS OPTIONS request (not related to Angular at all) … your requests should be so called simple requests: Simple requests are requests that meet the following criteria: … HTTP Method matches only: HEAD / GET / POST, … HTTP Headers matches only: Accept / Accept-Language / Content-Language / Last-Event-ID / Content-Type: application/x-www-form-urlencoded / multipart/form-data / text/plain.

[koutakou]

Hello,

It’s security mechanism from web browser not from Angular. I encourage you to read this article spec --> https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS