So beantragen Sie Cross-Domain mit Aurelia mit http-Client

Question

Ich habe eine einfache Daten-Ressource, die eine flache JSON-Datei aus meinem eigenen Projekt abruft. Wenn ich versuche, die url durch die eines Working-API-Endpunkt zu ersetzen, den ich in einer separaten Domäne ausgeführt habe, erhalte ich einen 401-Fehler (nicht autorisiert) in Chrome.

SETUP: Ich habe eine Visual Studio-Lösung mit zwei Projekten.

1) RateAppAPI (WebAPI Projekt w/AspNet.cors)
2) RateAppClient (ASPNET 5 Template w/Aurelia)
3) habe ich sowohl eine flache Datei und ein API Endpunkt dien up das gleiche json Dokument. Sie werden sehen, dass einer im Code kommentiert wird und der andere nicht kommentiert.

1. Das API-Projekt ohne Probleme meine GetAll Weg dient, kann ich traf den Endpunkt Postbote mit und ich wieder ein großes Ergebnis Json. Ich habe CORS aktiviert und richtig eingerichtet, ich habe das als als ein Problem ausgeschlossen.
2. Ich habe das Client-Projekt Aurelia im wwwroot läuft und ich bin mit aurelia-http-client, die ich den Code zur Verfügung stellt für, aber ich werde Ihnen sagen, dass das Beispiel, das ich Arbeiten mit keine Probleme, die Flat-Datei zur Verfügung stellen wird verwenden, Ich habe in einem Verzeichnis innerhalb das Client-Projekt.
3. Solange ich die Get() - Anfrage auf die flache Datei in meinem eigenen Projekt (natürlich) habe ich keine Probleme beim Einziehen der Daten und arbeiten damit. Nur wenn ich die URL so umstelle, dass sie auf den Endpunkt verweist, der sich in einer anderen Domäne befindet, erhalte ich den Fehler 401 (Nicht autorisiert).

Hier ist mein Code (ein ES6 Aurelia Modul), die die Daten-Ressource ist:

import {inject} from "aurelia-framework"; 
import {HttpClient} from "aurelia-http-client"; 

let baseURL = "http://localhost/RateAppAPI/api/UtilZip/ByUtil/7"; 
//let baseURL = "../api/utilzip/utilzip.json"; 

@inject(HttpClient) 

export class UtilZipData { 

constructor(httpClient) { 
    this.http = httpClient; 
    this.http.configure(x => { x.withCredentials(); }); 
} 

getAll() { 
    return this.http.get(baseURL) 
     .then(response => { 
      return response.content; 
     }); 
    } 
} 

Am Ende des Tages muss ich herauszufinden, wie man nur die Windows-Authentifizierung zu verwenden, und in der Lage sein, eine Client-Anwendung von einer Domäne zu laufen, dass die Domain localhost:1234 und Zugriff auf eine andere Domain nennen wir können die API-Domäne localhost/RatAppAPI der API-Aufruf CORS mit dem folgenden Verfahren aktiviert wird:

public static void Register(HttpConfiguration config) 
{ 
    var cors = new EnableCorsAttribute("http://localhost:1234/", "*", "*"); 
    config.EnableCors(cors); 
    config.MapHttpAttributeRoutes(); 

    config.Routes.MapHttpRoute(
     name: "DefaultApi", 
     routeTemplate: "api/{controller}/{id}", 
     defaults: new { id = RouteParameter.Optional } 
    ); 
} 

Answer 1

Das erste, was Sie versuchen sollten, ist den fallenden Schrägstrich im Ursprung zu löschen. Ich bin mir ziemlich sicher, dass ist das, was für Sie einige Probleme verursacht:

var cors = new EnableCorsAttribute("http://localhost:1234/", "*", "*"); 
//Should be the following instead 
var cors = new EnableCorsAttribute("http://localhost:1234", "*", "*"); 

auch vorausgesetzt, Sie gehen auf IIS zu bewirten und Sie suchen die gleiche CORS Politik global auf alle Ihre Controller-Aktionen anwenden, wodurch Sie dann kann es aus der Config auch tun:

<configuration> 
    <system.webServer> 
     <httpProtocol> 
      <customHeaders> 
       <add name="Access-Control-Allow-Origin" value="http://localhost:1234" /> 
       <add name="Access-Control-Allow-Methods" value="*" /> 
       <add name="Access-Control-Allow-Headers" value="*" /> 
      </customHeaders> 
     </httpProtocol> 
    </system.webServer> 
</configuration> 

auch die IIS-Optionen-Handler kann mit den Dingen, stören, so stellen sie sicher, dass es also entfernt

<system.webServer> 
    <handlers> 
    ... 
     <remove name="OPTIONSVerbHandler"/> 
    ... 
    </handlers> 
</system.webServer> 

Als letztes Mittel auch durch entweder CORS Sicherheit in Chrom deaktivieren kann versuchen, es mit den folgenden Argumenten --disable-web-security --user-data-dir oder das Erstellen einer Alias ​​in Ihrer Host-Datei für localhost und die Verwendung dieser instead.This nicht wirklich sein sollten beginnen erforderlich, wenn alle Header ordnungsgemäß festgelegt wurden.

Eine andere Sache, da Sie Anmeldeinformationen senden möchten, können Sie keinen Platzhalter für die zulässige Domäne verwenden. Ich denke das ist selbstverständlich :).

var cors = new EnableCorsAttribute("http://localhost:1234", "*", "*") 
{ 
    SupportsCredentials = true 
}; 

Answer 2

ich folgend in meiner API endete Global.asax mit

public void Application_BeginRequest(object sender, EventArgs e) 
     { 
    string httpOrigin = Request.Params["HTTP_ORIGIN"] ?? "*"; 

    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", httpOrigin); 

    //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, PUT"); 
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); 
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, dataType"); 
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true"); 

    if (Request.HttpMethod == "OPTIONS") 
    { 
     HttpContext.Current.Response.StatusCode = 200; 
     var httpApplication = sender as HttpApplication; 
     httpApplication?.CompleteRequest(); 
    } 
}