angular6 http requests returns isTrusted

Question

I have an angular6 application running in production, sporadically a few users are getting an error during http requests.

Http failure response for (unknown url): 0 Unknown Error response: {"isTrusted":true}

This affects users randomly, there is no pattern in the HTTP method the user or anything else as far as I can tell, I use sentry to log errors.

I already spent a lot of time searching for a solution, so far almost everything hinted at wrong cors headers. All requests are going through an api gateway where the cors headers are set.

'Access-Control-Allow-Headers': 'Content-Type, x-internal-token, Origin, Accept, X-Requested-With, If-Modified-Since, Cache-Control, Keep-Alive'
'Access-Control-Allow-Origin': 'http://example.com'
'Access-Control-Allow-Methods': 'PUT, POST, GET, DELETE, PATCH, OPTIONS'
'Access-Control-Max-Age': 3600

So far I haven't received any errors when the app is first loading and is getting some information from the api gateway, only later while the user is using the app. Even stranger I also got this error for ./assets/i18n/de.json (normal get request), which is not cors but just some static json for dynamic translations.

I'm totally out of ideas and any help is very much appreciated.

EDIT: Please read carefully; this problem only exists for some users and not all the time, this is not a general misconfiguration!

EDIT2: To further debug this issue I set up a second api-gateway (same code) that was configured to log all requests. A slight modification was made to the angular app so it would do the same request twice; one time against the real api-gateway and one time against the logging api-gateway (for some api calls). In one instance the app was able to do the request to the real api-gateway but not the logging gateway (same code, both nginx, cors header are the same).

EDIT3: The log gateway and the real api-gateway are located on different servers (different providers) and I can see the OPTIONS request in the nginx log with status 200.

EDIT4: I've moved the cors handling from api-gateway to nginx and so far I haven't received more errors.

Answer 1

It seems like Nginx configuration issue. The following Nginx codes will add HTML header responses Access-Control-Allow-Origin: * : public web static files of domain to let other domains access these web static files without issues:

location / {
  location ~* ^.+\.(?:css|cur|json|js|jpeg|gif|htc|ico|png|txt|otf|ttf|eot|woff|svg|webp|webm|zip|gz|tar|rar)$ {
    # If request comes from allowed subdomain
    # (yourdomain.com) then we enable CORS
    # if ($http_origin ~* (https?://yourdomain\.com(:[0-9]+)?$)) {
    #  set $cors "1";
    # }

    set $cors "1";

    # OPTIONS indicates a CORS pre-flight request
    if ($request_method = 'OPTIONS') {
      set $cors "${cors}o";
    }

    # Append CORS headers to any request from 
    # allowed CORS domain, except OPTIONS
    if ($cors = "1") {
      more_set_headers 'Access-Control-Allow-Origin: $http_origin';
      more_set_headers 'Access-Control-Allow-Credentials: true';
    }

    # OPTIONS (pre-flight) request from allowed 
    # CORS domain. return response directly
    if ($cors = "1o") {
      more_set_headers 'Access-Control-Allow-Origin: $http_origin';
      more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE';
      more_set_headers 'Access-Control-Allow-Credentials: true';
      more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept';
      add_header Content-Length 0;
      add_header Content-Type text/plain;
      return 204;
    }
  }
}

Answer 2

I think, this will solve the problem. In json file, please update the assets property to include an 'array' instead of 'string'.

It an issue with Angular CLI beta versions vs stable releases.

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets"
    }
]

 "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets"
      ]
    }
]