CORS-Fehler mit Aurelia Fetch-Client

Question

Ich benutze Aurelia Fetch Client meine eigene Slim Framework RESTful API abzufragen. Die API umfasst den richtigen Header (wie von Postman überprüft):

Access-Control-Allow-Headers →X-Requested-With, Content-Type, Accept, Origin, Authorization 
Access-Control-Allow-Methods →GET, POST, PUT, DELETE, OPTIONS 
Access-Control-Allow-Origin →* 
Cache-Control →no-store, no-cache, must-revalidate, post-check=0, pre- check=0 
Connection →close 
Content-Type →application/json;charset=utf-8 
Expires →Thu, 19 Nov 1981 08:52:00 GMT 
Host →localhost:8080 
Pragma →no-cache 
X-Powered-By →PHP/5.6.19 

Allerdings bin ich in der Javascript-Konsole die folgende Fehlermeldung erhalten:

Fetch API cannot load http://localhost:8080/api/v1/calendar/2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Wenn ich die CORS-Erweiterung für Google Chrome kann ich erfolgreich verbinden. (Jedoch ein zweites Problem ist, dass die CORS Erweiterung scheint die Antwort-Statuscode zu töten, alles zu 200 ändert, selbst wenn meine API gibt 403 oder 500)

Meine Aurelia-Code ist:

saveCalendar() { 
    this.httpClient.fetch('http://localhost:8080/api/v1/calendar/2', { 
     method: 'post', 
     body: json(data) 
    }).then(response => { 
      window.alert("Got a response: " + response.status); 
      if (response.status == 200) { // OK 
       window.alert("Calendar saved!"); 
      } else { // Error 
       window.alert("Error"); 
      } 
     }); 
    this.getCalendars(); 
} 

Warum ist nicht mir von überall zugänglich?

=== Edit:

Nach sorgfältiger Beobachtung, ich sehe, dass Aurelia und machen zwei Anfragen holen. Die Preflight-Anfrage OPTIONS scheint gut zu gehen und erhält den CORS Header in der Antwort. In der tatsächlichen POST-Anforderung gibt die API jedoch nichts zurück. Die POST-Request-Header sind wie folgt:

Accept:*/* Accept-Encoding:gzip, deflate, br Accept-Language:en-US,en;q=0.8,es-419;q=0.6,es;q=0.4,gl;q=0.2 Cache-Control:no-cache Connection:keep-alive Content-Length:142 content-type:application/json Host:localhost:8080 Origin:http://localhost:9000 Pragma:no-cache Referer:http://localhost:9000/ User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36

Wenn ich diese Header in Postman kopieren Sie die gleiche Anfrage zu machen, es nicht auch in der gleichen Weise. Aber wenn ich einen der Header (content-type:application/json) entferne, funktioniert es.

Die eigentliche Anfrage in meinem Aurelia Code sieht aus wie:

// src/common/api.js 
import { inject } from 'aurelia-dependency-injection'; 
import 'fetch'; 
import { HttpClient, json } from 'aurelia-fetch-client'; 

@inject(HttpClient) 
export class API { 
    constructor(httpClient) { 
    httpClient.configure(config => { 
     config 
     .withBaseUrl('http://localhost:8080/api/v1'); 
     .withDefaults({ 
      mode: 'cors', 
      headers: { 
      'Accept': 'application/json' 
      'Content-type' : 'application/json' 
      } 
     }); 
    }); 
    this.httpClient = httpClient; 
    } 

    getData(url) { 
    return this.httpClient.fetch(url) 
     .then(response => response.json()); 
    } 

    postData(url, data) { 
    return this.httpClient.fetch(url, { 
     method: 'post', 
     body: json(data) 
    }); 
    } 
} 

Es wäre offensichtlich scheinen die 'Content-type' : 'application/json' von der Aurelia-API-Client Fetch Config, aber selbst zu entfernen, wenn ich es tue, sendet er noch den Header.

Also meine neuen Fragen sind: 1. Wie verhindere ich, dass Aurelia diesen Header sendet? 2. ODER ... Warum stirbt Slim beim Empfang dieses Headers? 3. Gibt es noch etwas falsch mit meinem Code?

Answer 1

Höchstwahrscheinlich Ihren Server auf 8080 laufen müssen so konfiguriert werden, CORS zu akzeptieren verlangen, ob die headerd sonst ...

Die Konfiguration scheint zu sagen, für die die Server abhängig ist, was Sie, dass die Server ausgeführt wird. Ich werde diese Antwort aktualisieren, sobald Sie diesen Punkt geklärt haben.

Ich weiß nicht, über die Erweiterung, die Sie erwähnen, die einige seltsame Sachen tun müssen, die Sie am Ende mehr Probleme haben könnte, aber das ist nur meine Meinung.

Vielleicht haben Sie auch hier einen Blick haben wollen: Aurelia Post with http-fetch-client producing an options request