Question

我在Ionic中有一个模块，可以用PHP调用api。

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”放置在“标题”选项卡中，它可以正常工作（状态= 200），但是在离子模拟器中，我出现错误：Access-Control-Allow-Headers不允许请求标题字段idCidade在飞行前的反应中。

我在stackoverflow中尝试了大多数解决方案，但仍然无法正常工作。

一些额外的信息：

离子框架：3.9.2
离子应用脚本：3.1.8
角核：5.2.9
Angular编译器CLI：5.2.9
节点：8.11.1

有人来帮助我吗？

Answer 1

在飞行前响应中，Access-Control-Allow-Headers不允许请求标头字段idCidade

什么响应头a/b告诉浏览器请求中允许哪些请求头。查看您提供的列表

Access-Control-Allow-Headers

header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');标头不包含在该列表中。

Answer 2

当我使用Ionic Serve运行时，我在一个应用程序中遇到了同样的问题。如果您使用的是Google Chrome浏览器，则可以安装CORS扩展程序，然后启用它，然后再次测试（以我为例）。

这里是我使用的扩展名： https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

如果问题已经存在，我们可以检查其他方式

离子应用程序中的错误“飞行前响应中Access-Control-Allow-Headers不允许请求标头字段。”

2 个答案: