CORS с IONIC 3 и PHP

Question

У меня есть следующее сообщение, связанное с CORS, когда я отправляю имя пользователя и пароль из APP в IONIC 3:

Blockquote Доступ к XMLHttpRequest на «http://localhost/Service_mobile/service.php' от источника» http://localhost:8100' было заблокировано политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

У меня есть следующие заголовки в service.php:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Content-Type: application/json; charset=utf-8');

require_once($_SERVER['DOCUMENT_ROOT'] . '/libs/adodb5/adodb.inc.php');

function conect()
{
    global $database, $server, $db_user, $db_password;

    $database = "test";
    $server = "localhost";
    $db_user = "sa";
    $db_password = "sa";

    $db = ADONewConnection('odbc_mssql');
    $dsn = "Driver={SQL Server};Server=" . $server . ";Database=" . $database . ";";
    $db->Connect($dsn, $db_user, $db_password);
    return $db;
}

$postjson = json_decode(file_get_contents('php://input'),true);

if($postjson["action"] == "verify"){
    echo 'TEST';
}

И следующий код в conection.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestMethod ,RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ConexionAPI{
    constructor(private http:Http){

    }
login(username,password){
    var _url = "http://localhost/Service_mobile/service.php";
    var _body = {"action":"verify","ID_USER": username, "PASSWORD": password };
    var _header = new Headers({'Content-Type':'Application/json'});
    var _option = new RequestOptions({method:RequestMethod.Post,headers:_header});
    return this.http.post(_url,_body,_option).map(res=>res.json());
}
}

home.ts

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { ToastController } from 'ionic-angular';
import { Conex } from '../conection/conection';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [Conex]
})
export class HomePage {
  username: string;
  password: string;

  constructor(public navCtrl: NavController,
              public conex: Conex,
              public toastCtrl: ToastController) {

  }

  enter(){
    this.conexion.login(this.username,this.password).subscribe(data=>{
      if(data==null){
        let toast = this.toastCtrl.create({
          message: 'Error!',
          duration: 3000
        });
        toast.present();
      }else{
        let toast = this.toastCtrl.create({
          message: 'Correct!',
          duration: 3000
        });
        toast.present();
      }
    });
  }
}

Я забылчто-то ??

Answer 1

Добавьте в ваш файл PHP.Это работает для меня.

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
   $method = $_SERVER['REQUEST_METHOD'];
   if ($method == "OPTIONS") {
       die();
   }

Answer 2

Проблема может быть решена на стороне приложения, без изменения настроек бэкэнда (что на самом деле не является безопасным решением)

Если у вас возникают проблемы при запуске приложения с live-reload(например, на устройстве с параметром -l или в браузере) - ионный прокси может помочь:

“proxies”: [
  {
   “path”: “/api”,
   “proxyUrl”: “http://your-backend-domain.com”
  }
]

Если проблема возникает в производственной сборке, у вас большие проблемы.Проблема возникает из-за WKWebView, представленного в Ionic 3, который является более быстрым / лучшим / безопасным веб-рендерером и имеет очень строгие ограничения, связанные с CORS.

Есть способы решить эту проблему, однако:

• один использует @ ionic-native / http с cordova-plugin-advanced-http (ref: https://ionicframework.com/docs/v3/native/http/)
• другой мог бы попробовать встроенный в CORS веб-просмотр Троянского (ссылка: https://github.com/troyanskiy/cordova-plugin-ionic-webview) <- который на самом деле не проверен, но был бы хорошим вкладом в тестирование и отчет о вашем опыте </li>

удачи! CORS - большая / плохая проблема, когда дело доходит до Ionic:)