"Http failure response for (unknown url): 0 Unknown Error" mobile device

Question

I have an issue with CORS on my Angular 6/Symfony 4 project. This project have login/register module. I'm using FOSUserBundle and set enabled to false by default. Then, I send an email with a confirmation link (https://subdomain.example.com/confirm-email/CONFIRMATION_TOKEN) to verify that it's not a bot. The link redirects to a special page in Angular who PUT the user account to enable it. The thing is, everything works fine on laptop with any browser but when I want to do it with my phone, nothing append. I've tried to alert the error message and I got this :

{"headers":{"normalizedNames":{}, "lazyUpdate":null,"headers": {}},"status":0,"statusText":"UnknownError","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for (unknown url): 0 Unknown Error","error":{"isTrusted":true}}

So, I've got some researches and I found out that it is a CORS problem, some topics said it's Angular, some others said that the server has a wrong configuration. I've read lots of articles on CORS and I actually didn't any progress to resolve this issue.

Here are some samples :

Symfony, .env

CORS_ALLOW_ORIGIN=^https://subdomain.example.com$

Symfony, nelmio_cors.yaml

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        max_age: 3600
    paths:
        '^/': ~

Angular, login.service.ts

async confirmUser(confirmToken: string): Promise<any> {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json; charset=UTF-8'
        })
    };

    return await this.http.post(`${this.url}/user/${confirmToken}`, httpOptions).toPromise();
}

Angular, confirm-user.component.ts

async confirmUser() {
    try {
      await this.loginService.confirmUser(this.confirmToken);
      setTimeout(() => {
        window.location.href = 'https://example.com/';
      }, 1000);
    } catch (error) {
      swal({
        type: 'error',
        title: 'Oops...',
        text: error.statusText,
        showConfirmButton: false,
        showCancelButton: false,
        timer: 2000
      });
    }
}

I really don't know what is the problem and why it's not working on mobile device while it's works perfectly with a laptop. I'm using Browserstack to test on multiple devices (iOS, Android). Same with my mobile (iOS12) with Safari and Chrome.

FYI, those two project are on the same server but with two different url. Ex : subdomain.example.com and subdomain-api.example.com

If someone has ever encountered this and has a solution, please be my guest.

EDIT 1

Thanks to sideshowbarker for removing my cors tag, while checking your profile I saw one of your answers and tried "How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems" method. And it works for the OPTIONS request but not for the POST (image: https://i.stack.imgur.com/DMcwu.jpg). And for this I have maybe a solution : My CTO blocked by IP the access to the API. We only allow example.com, subdomain.example.com and IP's from our company. So, I guess we should allow https://cors-anywhere.herokuapp.com/ IP but is there another alternative ?

Answer 1

I don't think this is a CORS issue - that would normally show up as a CORS-specific error message - something like "No Access-Control-Allow-Origin response header found".

Can you supply a full set of request and response headers for a failing request?