I get Http failure response for unknown url 0 Unknown Error instead of actual error message in Angular

Question

I m using Angular 4 HttpClient to send requests to external service  It is a very standard setup   this httpClient get url  subscribe response   gt        do something with response    err   gt      console log err message           gt      console log  completed        The problem is  when the request fails I see a generic  Http failure response for  unknown url   0 Unknown Error message in console  Meanwhile  when I inspect the failed request in chrome I can see the response status is 422  and in the  preview  tab I see the actual message desribing failure cause    How do I access the actual response message I can see in chrome dev tools   Here s a screenshot demonstrating the problem

User · Answer

I m using ASP NET SPA Extensions which creates me a proxy on ports 5000 and 5001 that pass through to Angular s port 4200 during development   I had had CORS correctly setup for https port 5001 and everything was fine  but I inadvertently went to an old bookmark which was for port 5000  Then suddenly this message arose  As others have said in the console there was a  preflight  error message   So regardless of your environment  if you re using CORS make sure you have all ports specified - as the host and port both matter

User · Answer

You must use --port when serve server ng serve --open --port 4200     export class DatabaseService     baseUrl  String    quot http   localhost 8080  quot     constructor private http  HttpClient          saveTutorial response        var fullUrl   this baseUrl    quot api tutorials quot           return this http post fullUrl response

User · Answer

The problem was related to CORS  I noticed that there was another error in Chrome console       No  Access-Control-Allow-Origin  header is present on the requested resource  Origin  http   localhost 4200  is therefore not allowed access  The response had HTTP status code 422     This means the response from backend server was missing Access-Control-Allow-Origin header even though backend nginx was configured to add those headers to the responses with add header directive   However  this directive only adds headers when response code is 20X or 30X  On error responses the headers were missing  I needed to use always parameter to make sure header is added regardless of the response code   add header  Access-Control-Allow-Origin   http   localhost 4200  always   Once the backend was correctly configured I could access actual error message in Angular code

User · Answer

For me it was caused by a server side JsonSerializerException      An unhandled exception has occurred while executing the request   Newtonsoft Json JsonSerializationException  Self referencing loop   detected with type       The client said   POST http   localhost 61495 api Action net  ERR INCOMPLETE CHUNKED ENCODING ERROR HttpErrorResponse  headers  HttpHeaders  status  0  statusText   Unknown Error   url  null  ok  false          Making the response type simpler by eliminating the loops solved the problem

User · Answer

If you are using  NET Core application  this solution might help   Moreover this might not be an Angular or other request error in your front end application  First  you have to add the Microsoft CORS Nuget package   Install-Package Microsoft AspNetCore Cors   You then need to add the CORS services in your startup cs  In your ConfigureServices method you should have something similar to the following   public void ConfigureServices IServiceCollection services        services AddCors        Next  add the CORS middleware to your app  In your startup cs you should have a Configure method  You need to have it similar to this   public void Configure IApplicationBuilder app  IHostingEnvironment env   ILoggerFactory loggerFactory        app UseCors  options   gt       options AllowAnyOrigin   AllowAnyMethod   AllowAnyHeader         app UseMvc        The options lambda is a fluent API so you can add remove any extra options you need  You can actually use the option    AllowAnyOrigin    to accept any domain  but I highly recommend you do not do this as it opens up cross origin calls from anyone  You can also limit cross origin calls to their HTTP Method  GET PUT POST etc   so you can only expose GET calls cross domain etc

User · Answer

In case anyone else ends up as lost as I was    My issues were NOT due to CORS  I have full control of the server s  and CORS was configured correctly     My issue was because I am using Android platform level 28 which disables cleartext network communications by default and I was trying to develop the app which points at my laptop s IP  which is running the API server   The API base URL is something like http    LAPTOP IP  8081  Since it s not https  android webview completely blocks the network xfer between the phone emulator and the server on my laptop  In order to fix this   Add a network security config  New file in project  resources android xml network security config xml   lt  xml version  1 0  encoding  utf-8   gt   lt network-security-config gt     lt  -- Set application-wide security config -- gt     lt base-config cleartextTrafficPermitted  true   gt   lt  network-security-config gt    NOTE  This should be used carefully as it will allow all cleartext from your app  nothing forced to use https   You can restrict it further if you wish   Reference the config in main config xml   lt platform name  android  gt               lt edit-config file  app src main AndroidManifest xml  mode  merge  target   manifest application  xmlns android  http   schemas android com apk res android  gt           lt application android networkSecurityConfig   xml network security config    gt       lt  edit-config gt       lt resource-file src  resources android xml network security config xml  target  app src main res xml network security config xml    gt            lt  platform gt    That s it  From there I rebuilt the APK and the app was now able to communicate from both the emulator and phone   More info on network sec  https   developer android com training articles security-config html CleartextTrafficPermitted

User · Answer

working for me after turn off ads block extension in chrome  this error sometime appear because something that block http in browser

User · Answer

I was getting that exact message whenever my requests took more than 2 minutes to finish  The browser would disconnect from the request  but the request on the backend continued until it was finished  The server  ASP NET Web API in my case  wouldn t detect the disconnect   After an entire day searching  I finally found this answer  explaining that if you use the proxy config  it has a default timeout of 120 seconds  or 2 minutes    So  you can edit your proxy configuration and set it to whatever you need         api          target    http   localhost 3000        secure   false       timeout   6000000         Now  I was using agentkeepalive to make it work with NTLM authentication  and didn t know that the agent s timeout has nothing to do with the proxy s timeout  so both have to be set  It took me a while to realize that  so here s an example   const Agent   require  agentkeepalive     module exports           api              target   http   localhost 3000           secure  false          timeout  6000000               lt -- this is needed as well         agent  new Agent               maxSockets  100              keepAlive  true              maxFreeSockets  10              keepAliveMsecs  100000              timeout  6000000           lt -- this is for the agentkeepalive             freeSocketTimeout  90000                     onProxyRes  proxyRes   gt                let key    www-authenticate               proxyRes headers key    proxyRes headers key   amp  amp                  proxyRes headers key  split

User · Answer

If this is a node service  try the steps outlined here  Basically  it s a Cross-Origin Resource Sharing  CORS  error   More information about such errors here   Once I updated my node service with the following lines it worked   let express   require  express    let app   express     app use function req  res  next        res header  Access-Control-Allow-Origin             res header  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept            next

User · Answer

If you have a proper cors header in place  Your corporate network may be stripping off the cors header  If the website is externally accessible  try accessing it from outside your network to verify whether the network is causing the problem--a good idea regardless of the cause

User · Answer

For me it was a browser issue  since my requests were working fine in Postman   Turns out that for some reason  Firefox and Chrome blocked requests going to port 6000  once I changed the ASP NET API port to 4000  the error changed to a known CORS error which I could fix   Chrome at least showed me ERR UNSAFE PORT which gave me a clue about what could be wrong

User · Answer

Add This Codes in your connection file   header  Access-Control-Allow-Origin       header  Access-Control-Allow-Methods  PUT GET POST DELETE    header  Access-Control-Allow-Headers  Origin  X-Requested-With  Content-Type  Accept

User · Answer

My error was that the file was too large  dotnet core seems to have a limit   25Mb   Setting    maxAllowedContentLength to 4294967295  max value of uint  in web config decorating the controller action with  DisableRequestSizeLimit  services Configure options      options MultipartBodyLengthLimit   4294967295      in Startup cs   solved the problem for me

User · Answer

if you are using nodejs as backend  here are steps to follow  install cors in your backend app npm install cors  Add this code  const cors   require  cors     const express   require  express     const expressApp   express     expressApp use cors        origin    http   localhost 4200          quot methods quot    quot GET PUT POST quot         quot preflightContinue quot   false        quot optionsSuccessStatus quot   204       credentials  true

User · Answer

This error was occurring for me in Firefox but not Chrome while developing locally  and it turned out to be caused by Firefox not trusting my local API s ssl certificate  which is not valid  but I had added it to my local cert store  which let chrome trust it but not ff   Navigating to the API directly and adding an exception in Firefox fixed the issue

User · Answer

Is not as old as other questions  but I just struggled with this in an Ionic-Laravel app  and nothing works from here  and other posts   so I installed https   github com barryvdh laravel-cors complement in Laravel and started and it works pretty well

User · Answer

In asp net core  If your api controller doesn t have annotation called  AllowAnonymous    add it to above your controller name like   ApiController       Route  api          AllowAnonymous      public class TestController   ControllerBase

User · Answer

A similar error can occur  when you didn t give a valid client certificate and token that your server understands   Error      Http failure response for  unknown url   0 Unknown Error   Example code   import   HttpClient  HttpHeaders   from   angular common http   import   Observable  throwError   from  rxjs   import   catchError  map   from  rxjs operators    class MyCls1      constructor private http  HttpClient           public myFunc    void        let http  HttpClient       http get         https   www example com mypage                   headers            new HttpHeaders                               Content-Type    application json                  X-Requested-With    XMLHttpRequest                  MyClientCert                 This is empty                MyToken                      This is empty                                         pipe  map res   gt  res   catchError err   gt  throwError err               Note that both MyClientCert  amp  MyToken are empty strings   hence the error  MyClientCert  amp  MyToken can be any name that your server understands

User · Answer

For me it wasn t an angular problem  Was a field of type DateTime in the DB that has a value of  0000-00-00  and my model cannot bind that property correct so I changed to a valid value like  2019-08-12    I m using  net core  OData v4 and MySql  EF pomelo connector

User · Answer

If you are using Laravel as your Backend  then edit your  htaccess file by just pasting this code  to solve problem CROS in your Angular or IONIC project  Header add Access-Control-Allow-Origin     Header add Access-Control-Allow-Methods   GET POST OPTIONS DELETE PUT

User · Answer

Mine was caused by an invalid relationship in the models I was trying to query  Figured out by debugging the response it crashed at the relation

[angular] I get "Http failure response for (unknown url): 0 Unknown Error" instead of actual error message in Angular

Examples related to angular

Examples related to typescript