Ionic 4 and Capacitor -- Access to XMLHttpRequest from origin 'http://localhost:8100' has been blocked by CORS policy

Ionic Framework
1

There is so many posts online regarding CORS, but I can’t seem to figure out what I am doing right, or wrong in order to get this thing to work. My dev team controls our api server and for the sake of getting this to work, we’ve allowed access to all requests coming in, but I am still met with the frustrating error

Access to XMLHttpRequest at 'https://app.mydomain.com/api/login_check' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

When I run my app in a Chrome browser that has disabled-web-security or through a proxy like https://cors-anywhere.herokuapp.com/ it works great, but when I run in a simulator or Test Flight from Apple I am getting the error. I have been working on this for much longer than I ever imagined–please, someone shine some light :slight_smile:

Here is my code:

...
    login(username: string, password: string) {
        const httpHeaders = new HttpHeaders({
            'Content-Type': 'application/json'
        });
        const options = {
            headers: httpHeaders
        };
        
        console.log(options);
        return this.httpClient
            .post<AuthResponseData>(
                `${this.AUTH_SERVER_ADDRESS}/login_check`, {username: username, password: password}, options).pipe(
                tap(this.setUserData.bind(this))
                );
    }
...
2

It is saying the preflight request failed

Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Basically its going to send a OPTIONS call to the login_check
The server must respond with both an “access-control-allow-origin” that will match the application and if you read the last part of the message it should be a HTTP ok or a 200 status code response. Make sure you are not getting anything else.
I would check the network tab for these 2 things

3

someone help me on this. angular - How to add "Access-Control-Allow-Origin" header in each api request - Ionic Capacitor App - Stack Overflow