new HttpHeaders (). set () не устанавливает заголовки - Ionic / Angular

Question

Я создаю небольшое приложение, используя NodeJs и Ionic v3, и застрял с ошибкой CORS:

Не удалось загрузить http://localhost:3000/crm/getAllClients: Ответ на предварительный запрос не проходит проверку контроля доступа: нет Заголовок «Access-Control-Allow-Origin» присутствует в запрошенном ресурс. Происхождение 'http://localhost:8100' поэтому не допускается доступ.

Я установил CORS в nodeJs следующим образом:

app.use(cors());

Чтобы сделать HTTP-запрос с помощью Ionic, я использую:

import {HttpClient, HttpHeaders} from "@angular/common/http";

Вот мой код в моем сервисе Ionic:

 initHeaders() {
    let headers = new HttpHeaders()
      .set('Access-Control-Allow-Origin', "*")
      .set("Content-Type", "application/json")
      .set("Access-Control-Expose-Headers", "Content-Length");

    return headers;
  }

  getAllClients () {
    return this.http.get(this.domain + 'crm/getAllClients', {headers: this.initHeaders()});
  }

Вот заголовки без заголовка:

Я что-то не так делаю?

Answer 1

У меня была похожая проблема в прошлом. Насколько я понимаю, вы не делаете ничего плохого, ваши три заголовка находятся внутри "Access-Control-Request-Headers" (на вашем скриншоте под "Request Headers" . Браузер объединяет все ваши заголовки CORS и помещает их в «Access-Control-Request-Headers» .

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

app.use(function (req, res, next) {
res.header("Access-Control-Allow-Headers", "Access-Control-Expose-Headers, Content-Type, Accept");
next();
});

вместо использования

app.use(cors())

Или убедитесь, что вы пишете app.use (cors ()) перед добавлением маршрутов, чтобы маршруты использовали cors.

Answer 2

Моя проблема заключалась в том, что я вызвал cors Middleware после того, как установил маршруты в своем app.js в узле!

// set it before routes !
app.use(cors());

app.use('/', index);
app.use('/crm', crm);