Aurelia Post mit http-fetch-client produziert eine Option Anfrage

Question

Ich erstelle ein kleines Forum, wo Menschen in unserem Unternehmen Anzeigen für Waren oder Dienstleistungen, die sie verkaufen möchten, unter Verwendung von aurelia. Ich habe eine Liste von Anzeigen Seite funktioniert gut, eine Detailseite für jede Anzeige funktioniert gut beide mit get Anfragen von einer API. Allerdings kann ich die Arbeit der Post anscheinend nicht bekommen, wenn jemand einen Kommentar zu einer Anzeige hinzufügen möchte.

@inject(HttpClient) 
export class ApiData { 
    constructor(httpClient) { 
     httpClient.configure(config => { 
      config 
       .withBaseUrl("MyUrl"); 
     }); 
     this.http = httpClient; 
     //.configure(x => {x.withHeader('Content-Type', 'application/json');}); 
    } 

    postAdvertComment(comment, id) { 
     return this.http.fetch(`/adverts/${id}/comments`, { 
      method: "post", 
      body: json(comment), 
      headers: { 
       'Accept': 'application/json' 
      } 
     }); 
    } 

    getAdverts() { 
     return this.http.fetch("/adverts") 
      .then(response => { 
       return this.adverts = response.json(); 
      }); 
    } 

    getAdvert(id) { 
     return this.http.fetch(`/adverts/${id}`) 
      .then(response => { 
       return this.advert = response.json(); 
      }); 
    } 
} 

tut dieses Projekt haben wir einige Probleme mit CORS gehabt haben, alle gelöst, indem in der api in AllowCors Hinzufügen von Tags, einschließlich allen Methoden usw.

<add key="CorsAllowedOrigins" value="*" /> 
<add key="CorsAllowedHeaders" value="" /> 
<add key="CorsAllowedMethods" value="*" /> 

aber wenn ich versuche, und führen Sie den Beitrag , führt eine options-Methode aus und gibt eine 400 Bad-Anfrage zurück. Here

Wir erhalten auch die folgenden CORS Fehler:

Fetch API cannot load MyURL/api/adverts/2/comments. Response to preflight 
request doesn't pass access control check: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. Origin 'http://localhost:49877' is 
therefore not allowed access. The response had HTTP status code 400. If an 
opaque response serves your needs, set the request's mode to 'no-cors' to fetch 
the resource with CORS disabled. 

Ich weiß nicht, ob es ein Problem mit unserem C# api ist oder mit wie ich von aurelia zu schreiben bin versucht, aber wir haben versucht, Senden von Anfragen vom Postboten und es funktioniert gut, versuchte Post-Anfrage innerhalb der gleichen App mit jquery und es funktioniert gut, und alle Get-Anfragen funktionieren gut, aber aus irgendeinem Grund verursacht dieser Beitrag alle Arten von Problemen.

Answer 1

Es scheint ein Problem in Ihrem WebAPI zu sein, aber bevor ich Ihnen einige mögliche Lösungen gebe, möchte ich Ihnen einige wichtige Dinge zeigen.

• Postman ist nicht von CORS betroffen, so dass alle Anfragen funktionieren.
• jQuery ajax verwendet XHR (XmlHttpRequest Objekt), während aurelia-fetch-client Fetch verwendet (window.fetch. Allerdings verwendet die Fetch-Polyfill XHR im Hintergrund). Sie sind verschiedene Ansätze, um das gleiche Problem zu lösen. Nur weil einer von ihnen arbeitet, heißt das nicht, dass der andere auch funktionieren sollte.
• Die OPTIONS-Anfrage wird durch fetch gemacht, so funktioniert es. Weitere Informationen hier https://developers.google.com/web/updates/2015/03/introduction-to-fetch?hl=en

dieses Problem zu lösen versuchen, diese Tags aus web.config zu entfernen, und erlaubt CORS in Ihrem Startup.cs. Wie folgt aus:

public void Configuration(IAppBuilder app) 
{ 
    app.UseCors(CorsOptions.AllowAll); //or another parameter 
    //rest of your code 
} 

Sie müssen den Content-Type-Header auf application/json nicht festlegen. Es wird automatisch erstellt, wenn Sie die json() Funktion --->body: json(comment)

verwenden Wenn Sie OWIN verwenden, müssen Sie den Inhaltstyp möglicherweise als x-www-form-urlenconded senden. Sehen Sie sich in diesem Fall Post 'x-www-form-urlencoded' content with aurelia-fetch-client

an