2016-05-05 17 views
4

Ich entwickle eine Anwendung mit ionischen, ich könnte Daten von meinem webApi-Server abrufen und sie im Navigator mit ionic serve anzeigen, aber wenn ich versuche, es auf dem Emulator auszuführen: ionic run android -l -c bekomme ich diesen Fehler: net::ERR_CONNECTION_REFUSEDnet :: ERR_CONNECTION_REFUSED ionische

enter image description here

Was seltsam ist, dass der Umfang $ die erforderlichen Daten enthält, und ich konnte sie log.

+0

Haben Sie CORS auf Ihrer Web-API aktiviert? Außerdem ist localhost im Emulator der Emulator, nicht Ihr Web-API-Server. Sie müssten Ihren Web-API-Server in Ihrem Netzwerk verfügbar machen. Ich habe das unter Windows 10 getan, indem ich IIS als Reverse Proxy konfiguriert habe, der Anfragen an IIS express weiterleitet. –

+0

danke, aber wie kann ich das tun? –

+0

Was tun? Aktivieren von CORS? Expose Ihren Web-API-Server zu Ihrem Netzwerk? oder Konfigurieren von IIS als Reverse-Proxy? –

Antwort

4

Mehr als wahrscheinlich Localhost auf dem Android-Gerät/Emulator wird nicht auf die IP-Adresse Ihrer Entwicklungsmaschine/Server aufgelöst. Localhost verweist wahrscheinlich auf das Gerät/den Emulator selbst. Können Sie stattdessen die tatsächliche IP-Adresse Ihres Geräts eingeben? Oder können Sie den Webdienst irgendwo in der Cloud hosten und ausprobieren?

Danke, Dan

1

Da die cordova App aus dem Gerätedateisystem geladen wird, hat es einen anderen Ursprung als die Bahn api. Die App versucht, die Web-API aufzurufen, aber dies ist durch die Same Origin Policy verboten. Um dieses Problem zu beheben, müssen Sie enable CORS auf Ihrer Web-API.

Um CORS zu aktivieren, müssen Sie das Microsoft.AspNet.WebApi.Cors NuGet-Paket installieren und das Attribut EnableCors verwenden. Zum Beispiel:

using System.Collections.Generic; 
using System.Web.Http; 
using System.Web.Http.Cors; 
using WebApiServer.Models; 

namespace WebApiServer.Controllers 
{ 
    [RoutePrefix("databases")] 
    [EnableCors("*", "*", "*")] 
    public class DatabasesController : ApiController 
    { 
     [Route("")] 
     [HttpGet] 
     public IHttpActionResult Get() 
     { 
      var databases = new List<DatabaseCategory>() 
      { 
       new DatabaseCategory 
       { 
        CategoryName = "Bases de datos relacionales", 
        Databases = new List<Database>() 
        { 
         new Database() { DatabaseName = "SQL Server" }, 
         new Database() { DatabaseName = "Oracle" }, 
         new Database { DatabaseName = "PostgreSQL" } 
        } 
       }, 
       new DatabaseCategory 
       { 
        CategoryName = "Bases de datos NoSQL", 
        Databases = new List<Database>() 
        { 
         new Database() { DatabaseName = "RavenDB" }, 
         new Database { DatabaseName = "CouchBase" }, 
         new Database { DatabaseName = "MongoDB" } 
        } 
       } 
      }; 
      return Ok(databases); 
     } 
    } 
} 

Wenn die App auf einem Gerät (emulierten oder physisch) ausgeführt ruft http://localhost:26309/databases es versucht, an Port 26309 auf dem Gerät itseft, nicht auf die Entwickler-Maschine zu verbinden, die den Web-api laufen. Sie erhalten also ERR_CONNECTION_REFUSED, weil niemand auf dem Gerät diesen Port überwacht.

Anstatt http://localhost:26309 zu verwenden, sollten Sie die IP-Adresse Ihrer Entwicklermaschine oder einen DNS-Namen verwenden, der zu ihr aufgelöst wird. Zum Beispiel http://192.168.8.162:26309 oder http://yourMachine.yourDomain.com:26309. Aber dann treffen Sie ein anderes Problem, Ihre Web-API läuft auf dem Entwicklungs-Webserver IIS Express, der keine Remote-Verbindungen zulässt. Es kann so konfiguriert werden, dass Remote-Verbindungen zugelassen werden, aber dann müssten Sie Visual Studio als Administrator ausführen. Eine bessere Lösung ist das Installieren von IIS und das Konfigurieren von IIS als Reverseproxy. Dies kann in Windows 10 Pro durch die Installation URL rewrite and ARR und configuring it erfolgen:

  1. Erste IIS installieren, gehen Sie zu Systemsteuerung, Windows-Funktionen ein- oder Aus, Internet Information Services aktivieren.
  2. Install URL 2.0 Umschreiben von here
  3. Anwendung anfordern Installieren
  4. Öffnen Sie den Internet Information Services Manager 3.0 von here
  5. hinzufügen Web-Site Routing. Legen Sie den Site-Namen und den physischen Pfad fest. Geben Sie im Abschnitt "Bindungen" den Port 26308 an (meine persönliche Konvention: IIS Express-Port - 1). Lassen Sie den Hostnamen leer.
  6. Klicken Sie auf die neu erstellte Website. Im rechten Bereich öffnen Sie "URL Rewrite"
  7. Klicken Sie auf "Regel hinzufügen", wählen Sie "Reverse Proxy"
  8. Schreiben Sie localhost: 26309 auf das Textfeld "Geben Sie den Servernamen oder die IP-Adresse ein. ."
  9. Klicken Sie auf OK
  10. hinzufügen eine Ausnahmeregel für den TCP-Port 26308 auf die Windows-Firewall.

Jetzt müssen Sie Sie cordova App ändern Anfragen an die neu erstellte Website auf IIS zu machen. Es muss Anfragen an http://192.168.8.162:26308 oder http://yourMachine.yourDomain.com:26308

auf diese Weise machen Sie Ihre cordova App und die Web-api App gleichzeitig debuggen können, meine ich Sie Bruchstellen sowohl hinzufügen können. Es für emulierte Geräte sowie körperliche Arbeiten Geräte, die an den USB-Anschluss angeschlossen sind, benötigen ein geeignetes WLAN Ihre Entwicklungsmaschine und -gerät.

0

Dieser Fehler kann aus verschiedenen Gründen auftreten.

Stellen Sie sicher, dass die URL, auf die Sie zugreifen möchten, gültig ist oder nicht.

Stellen Sie sicher, dass CORS in Ihrer Back-End-Anwendung aktiviert ist. Dazu Microsoft.AspNet.WebApi.Cors verwenden oder wenn Sie mit OWIN dann in startup.cs Konfiguration verwenden app.UseCors (Microsoft.Owin.Cors.CorsOptions.AllowAll) (das kommt von Microsoft .Owin.Cors)

Nachdem Sie dies getan zu tun, gehen Sie bitte zu Ihrer web.config und geben Sie die folgenden Dinge:

<system.webServer> 
<httpProtocol> 
     <customHeaders> 
     <clear/> 
     <add name="Access-Control-Allow-Credentials" value="true"/> 
     </customHeaders> 
    </httpProtocol> 
</system.webServer> 

Dies das Problem lösen.

Verwandte Themen