Ionic adding additional access control allow origin to response headers

Question

Ionic/Angular adding additional access control allow origin to response headers. How to prevent this?

My Nginx server has CORS enabled

add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

With my ionic http code using Angular HttpClient

const req = this.http.get('https://example.com/apiRequest');

When accessing the api get call on the browser, the response headers are normal

However, when using ionic serve, I get 2 Access-Control-Allow-Origin headers, one is localhost:8100 and the other is '*' which was added. This issue also occurs on Ios Simulator, android phone/simulator.

My guess is that Ionic/Angular is doing something, but I just don't know what. I don't own the nginx server so I can only ask through support about headers being added.

Has this issue occurred for anyone else? I don't think adding Ionic proxies would resolve this issue since I'm using a production website and tested it on a physical android device and the same issue occurs.

Or is this actually an Nginx error?

EDIT

After removing add_header 'Access-Control-Allow-Origin' '*' always; from nginx, I'm still getting access-control-allow-origin set as localhost.

I also have these headers, do they automatically add my request header origin to the response header?

vary: Accept-Encoding vary: Origin

origin: http://localhost:4200 referer: http://localhost:4200/

Request headers

    Accept
    application/json, text/plain, */*
Accept-Encoding
    gzip, deflate, br
Accept-Language
    en-US,en;q=0.5
Connection
    keep-alive
Host
    example.com
Origin
    http://localhost:4200
Referer
    http://localhost:4200/tabs/home
User-Agent
    Mozilla/5.0 Firefox/80.0

Ionic Framework: @ionic/angular 5.3.2 @angular/cli :9.1.12

No, I haven't added anything addition to Angular HttpClient at all, just using the get call. — NeedHelp101
can you try this out. Here Initiate Header object over. let headers = new Headers({ 'Content-Type': 'application/json', 'withCredentials': 'true' }); And then send that header with our request this.http.get(url, { headers: headers }) — Arunkumar Ramasamy
Tried that, doesn't do anything, still have double access-control-allow-origin in the response header — NeedHelp101

Pankaj Sati Pankaj Sati · Accepted Answer · 2020-09-17T05:55:32

Ionic/Angular is not adding any Access-Control-Allow-Origin header because it is a response header generally sent by a web server.

If you don't have control over the server, then it is advised to use HTTP Advance plugin for making http requests. This plugin makes use of native libraries for http requests, thus no CORS policy is enforced.

A Brief about CORS in Ionic: Cross Origin Resource Sharing is policy enforced by web browsers mainly to protect user's data and prevent attacks that would compromise your app.

In ionic 3, we didn't had to deal with CORS errors because our application was served with file:// origin. But with newer versions & upgrades to webview, our application is served on localhost:// or ionic://

When your application request a web server, the underlying Webview verifies the requests made to different origin. i.e. other than localhost.
This verification is done by sending a Preflight request. In simpler words, the webview asks the server that a user at "localhost" is trying to access one of your resources, should I allow it?
If the server responds with right CORS headers in response to the Preflight request, webview then makes the actual GET/POST/PUT requests.

Ionic adding additional access control allow origin to response headers

1 Answers