Angular 6: Http failure response (Microsoft Edge)

Question

I'm trying to make calls to an API, however I've been facing issues when using M Edge (Chrome, IE and Firefox are OK). For every single request I try to do I get the following error in the console:

This is my service:

@Injectable({ providedIn: 'root' })
export class AuthService {
    constructor(private http: HttpClient) {}

    signup(
        firstName: string,
        lastName: string,
        email: string,
        country: string,
        password: string
    ) {
        const data = {
            firstName: firstName,
            lastName: lastName
        };

        const headers = new HttpHeaders({
            'Content-Type': 'application/json; charset=utf-8'
        });

        return this.http.post('https://api.lan/new/', data, {
            headers: headers,
            observe: 'response'
        });
    }
}

API Nginx configuration:

server {
    listen 80;
    listen [::]:80;

    server_name     visionapi-dev.arkadin.lan;

    root            /var/www/online-vision-api/httpdocs;
    error_log   /var/www/online-vision-api/logs/error_log;
    access_log      /var/www/online-vision-api/logs/access_log;
    index           index.php;

    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow_Credentials' 'true' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' always;
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH' always;

    location / {
            if ($request_method = 'OPTIONS') {
                    add_header 'Access-Control-Allow-Origin' '*' always;
                    add_header 'Access-Control-Allow_Credentials' 'true' always;
                    add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' always;
                    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH' always;
                    add_header 'Access-Control-Max-Age' 1728000 always;
                    add_header 'Content-Length' 0 always;
                    return 204;
            }
            # Check if a file or directory index file exists, else route it to index.php.
            try_files $uri $uri/ /index.php;
    }

    location ~ \.php$ {
            include snippets/fastcgi-php.conf;

            fastcgi_pass                    unix:/var/run/php/php7.0-fpm.sock;
            fastcgi_param                   SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_read_timeout    180;
    }
}

I already google like crazy, some has any idea?

Thanks!

`Http failure response for (unknown url): 0 Unknown Error` looks like you have a CORS problem. So you only get the error message in Edge? — kedenk, Sep 19 '18 at 08:23
does it work if you remove those ? attribut in the request post methode { headers: headers, observe: 'response' }. Can you provide some information of the "network" tab in the dev tool ? Or there is not request launched at all ? — xrobert35, Sep 19 '18 at 08:23
Hey @xrobert35, same result removing the headers.The request does not even appear under the network tab when using Edge. — Leandro Lorenzini de Oliveira, Sep 19 '18 at 08:31
However, I think this is a CORS problem. Have you access to server source code? Can you add the `Access-Control-Allow-Origin` header? — kedenk, Sep 19 '18 at 08:38
If the request is not send at all I don't think it's a server problem (but perhaos it's another edge strange behaviour :p). However is it necessary for to do CORS ? perhaps you can try to add this Api in your angular ng serve proxy conf to see if it works — xrobert35, Sep 19 '18 at 08:40
This error is usually for CORS, but how come it works fine in Chrome, FF and IE. To check if it is a CORS issue, could you call the API with a GET method, and using text/plain for Content-Type? — David, Sep 19 '18 at 09:03
Guys, I suppose it's really CORS as you mention. I tried to simulate the same request using a nodejs script and it works. I updated my question with the api server configuration. — Leandro Lorenzini de Oliveira, Sep 19 '18 at 09:07
What if you add `http://localhost:4200` (or whatever scheme/hostname/port) you are using for your front, instead of `*` for `Access-Control-Allow-Origin`? And you don't need to specify the headers twice I think — David, Sep 19 '18 at 09:15
Hey @David, I tried to add http://localhost:4200 instead of *, also tried $http_origin but still same result with Edge. Thanks. — Leandro Lorenzini de Oliveira, Sep 19 '18 at 09:26
Did you see this? https://stackoverflow.com/questions/35176082/why-are-cors-requests-failing-in-microsoft-edge-but-working-in-other-browsers — David, Sep 19 '18 at 09:44
Personnaly I would have try to not be in CORS situation to see if edge still block the request, like this you will be sure that's a CORS problem. We know that sometime ie/edge add some test to avoid security problem. — xrobert35, Sep 19 '18 at 10:37
maybe you should use `--proxy-config` parameter of `ng serve` to avoid cors issues — zhimin, Sep 19 '18 at 10:50
Hey guys, I also think it's s a CORS issue. When I try to use nodejs with CORS properly configured it works. I'm checking with the infra guys who set up the server and will post their discoveries as well. — Leandro Lorenzini de Oliveira, Sep 19 '18 at 10:52

Angular 6: Http failure response (Microsoft Edge)

0 Answers0