Ошибка CORS с использованием клиента Aurelia Fetch

Question

Я использую Aurelia Fetch Client для запроса моего собственного API-интерфейса RESTful Slim Framework. API включает правильный заголовок (засвидетельствованное Postman):

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 

Однако, я получаю следующее сообщение об ошибке в консоли JavaScript:

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.

Если я использую расширение CORS для Google Chrome, я могу подключиться успешно. (Тем не менее, вторичная проблема заключается в том, что расширение CORS, кажется, убивает код состояния ответа, изменяя все 200, даже когда мой API возвращает 403 или 500)

Мой Aurelia код:

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(); 
} 

Почему нет Access-Control-Allow-Origin: *, позволяя мне получить доступ из любого места?

=== Edit:

После более тщательного наблюдения, я вижу, что Аурелия и Fetch делают 2 запроса. Запросы предварительной проверки OPTIONS, похоже, прекрасны и получают заголовок CORS Access-Control-Allow-Origin: * в ответе. Однако в действительном POST-запросе API ничего не возвращает. В заголовках запроса POST следующим образом:

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

Когда я копирую эти заголовки в Почтальон, чтобы сделать такой же запрос, он также не таким же образом. Но, если я удалю один из заголовков (content-type:application/json), он работает.

Фактический запрос в моем коде Aurelia выглядит следующим образом:

// 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) 
    }); 
    } 
} 

Казалось бы, очевидно, чтобы удалить 'Content-type' : 'application/json' от клиента Aurelia API Fetch конфигурации, но даже когда я делаю, он по-прежнему посылает заголовок.

Итак, мои новые вопросы: 1. Как предотвратить Aurelia от отправки этого заголовка? 2. ИЛИ ... Почему Slim умирает при получении этого заголовка? 3. Есть ли что-то еще в моем коде?

Answer 1

Скорее всего, ваш сервер работает на 8080 должен быть настроен, чтобы принять CORS запросить кажется ли headerd сказать иначе ...

Конфигурация для указанного сервера зависит от того, что вы используете этот сервер. Я уточню этот ответ, как только вы уточните этот момент.

Я не знаю о расширении, которое вы упомянули, что должно сделать какой-то странный материал, который может привести к тому, что у вас больше проблем в конце, но это только мое мнение.

Вы также можете захотеть взглянуть здесь: Aurelia Post with http-fetch-client producing an options request