Ionic 4: CORS issue

Ionic Framework Ionic Angular
1

I am using a reverse proxy from serverside, and we have multiple servers(Environments).
I have configured these below rule to access My servers API’s

Header always set Access-Control-Allow-Headers "X-Requested-With, X-HTTP-Method-Override, Accept, x-forwarded-user, workspacekey, upgrade-insecure-requests, csrf-token, Access-Control-Allow-Origin, cookie, Content-Type, lazyupdate, x-http-method, X-Requested-With, normalizednames, headers"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Origin *

I tried below example to access proxy URLs to resolved CORS issue: but no use.

https://ionicframework.com/blog/handling-cors-issues-in-ionic/
its throwing below error:

Access to XMLHttpRequest at 'https://ionicabc.com/getUserinitContext?_dc=1585750583523&$format=JSON' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Code of http call:
Headers that i am inclding while API call:

const headers = {
            'Content-Type': 'application/json; charset=UTF-8',
            'Accept': '*/*',
            'X-Requested-With': 'XMLHttpRequest',
            'isMobileApp': 'true',
            'x-http-method': 'MERGE'
        };


const options = { headers, observe: 'response' as 'body' };
return this.httpClient.get(url, options)
            .map(this._mapResponse)
            .catch(err => this.onError(err))
            .do(response => this.onSuccess(response));

Note: We have a VPAT team which says allowing localhost in the server can cause severe security issue, so we are not allowing specific to localhost in the “Access-Control-Allow-Origin Header”.

Help will be appriciated.

2

Hi, first, add isMobileApp to your Access-Control-Allow-Headers in server side, all header send in request need to be allowed in backend.

second, these backend configurations are uncompatible each to other, if Access-Control-Allow-Credentials is set to true, yo can’t set Access-Control-Allow-Origin to an wildcard ‘*’

Maybe changing those configurations like that could work:

Access-Control-Allow-Credentials "false"
Access-Control-Allow-Origin *

if you need to expose some credentials or header us access-control-expose-headers: headerName