Ошибка в ионном приложении: «Поле заголовка запроса не разрешено Access-Control-Allow-Headers в ответе перед полетом».

Question

У меня есть модуль в Ionic, который вызывает API в PHP.

import { LoadingController } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

....

 getPatrocinios(cidade) {
   var headers = new Headers();
   headers.append('idCidade', cidade);
   let url = 'http://somesite.com/test/index.php';
   return this.http
      .get(url, { headers: headers })
      .map(res => res.json());
  }

в модуле PHP я сделал это:

<?php
header('Access-Control-Allow-Origin: *');  
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET,HEAD,OPTIONS,POST,PUT');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');

define('CHARSET', 'UTF-8');
define('REPLACE_FLAGS', ENT_COMPAT | ENT_XHTML);

function getHeaders($header_name = null) {
  $keys=array_keys($_SERVER);   
  if(is_null($header_name)) {
      $headers=preg_grep("/^HTTP_(.*)/si", $keys);
  } else {
    $header_name_safe=str_replace("-", "_", strtoupper(preg_quote($header_name)));
    $headers=preg_grep("/^HTTP_${header_name_safe}$/si", $keys);
  }

  foreach($headers as $header) {
    if(is_null($header_name)) {
      $headervals[substr($header, 5)]=$_SERVER[$header];
    } else {
      return $_SERVER[$header];
    }
  }
  return $headervals;
}
$id_cidade = getHeaders("idCidade");

...

Используя Postman и поместив idCidade во вкладку Headers, он работает нормально (status = 200), но в эмуляторе ionic у меня возникает ошибка: Поле заголовка запроса idCidade не разрешено Access-Control-Allow-Headers в предполетном ответе.

Я пробовал большинство решений в stackoverflow, но все еще не работает.

Некоторая дополнительная информация:

• Ионная структура: 3.9.2
• Ионные скрипты приложения: 3.1.8
• Угловой сердечник: 5.2,9
• CLI углового компилятора: 5.2.9
• Узел: 8.11.1

---

Кто-нибудь, кто мне поможет?

Answer 1

Поле заголовка запроса idCidade не разрешено Access-Control-Allow-Headers в ответе перед полетом

Какой заголовок ответа Access-Control-Allow-Headers Сообщает браузеру, какие заголовки запроса разрешены в запросе. Посмотрите на список, который вы предоставили

header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');

Заголовок idCidade не включен в этот список.

Answer 2

У меня была такая же проблема в приложении, когда я работал с Ionic Serve. Если вы используете Google Chrome, вы можете установить расширение CORS, включить его и снова протестировать, в моем случае это работает.

Вот расширение, которое я использовал: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Если проблема уже существует, мы можем проверить другие способы