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

Question

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

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.)

Мой код Аурелии:

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: * разрешить мне доступ откуда угодно?

=== Редактировать:

После более тщательного наблюдения я вижу, что Аурелия и Фетч делают 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

Когда я копирую эти заголовки в Postman, чтобы сделать тот же запрос, он также завершается сбоем таким же образом. Но если я удалю один из заголовков (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' из конфигурации Fetch клиента Aurelia API, но даже когда я это делаю, он все равно отправляет заголовок.

Итак, мои новые вопросы: 1. Как я могу помешать Аурелии отправить этот заголовок? 2. ИЛИ... Почему Слим умирает при получении этого заголовка? 3. Что-нибудь еще не так с моим кодом?

Answer 1

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

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

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

Вы также можете посмотреть здесь: Aurelia Post с http-fetch-client производит запрос опций