API входа Ionic Framework - Ответ на предпечатную проверку не имеет статуса HTTP ok

Question

Я создал базовую форму входа и службу аутентификации с помощью Ionic Framework и продолжаю сталкиваться с проблемами CORS.Когда я запускаю приложение в Google Chrome и пытаюсь войти в систему, я получаю эту ошибку: Ошибка ответа HTTP preflight

Failed to load http://example.com/api.login: Response for preflight does not have HTTP ok status

Это самая распространенная ошибка, которую яполучаю, но я также продолжаю получать ошибки при выполнении запросов OPTIONS (хотя я делаю запрос POST, но я слышал, что именно это делает ionic в браузере разработчиков).Я использую базовый REST API с платформой Slim, размещенной на моем сервере GoDaddy.Я провел некоторое исследование, и все продолжают говорить, что мне нужно добавить Access-Control-Allow-Origin: "*" в мой файл .htaccess.

Вот файл .htaccess в моей файловой структуре API:

RewriteEngine On

#RewriteBase /api/

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]

Я не уверен, что делаю неправильно.Я проверил, чтобы убедиться, что API работает с Почтальоном, а логин и регистрация работают правильно.И, конечно, я правильно ввожу данные для входа.

Вот мой auth-service.ts:

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

@Injectable()
export class AuthServiceProvider {

  static readonly LOGIN_URL = 'http://example.com/api/login';
  static readonly REGISTER_URL = 'http://example.com/api/register';
  access: boolean;
  token: string;

  constructor(public http: Http) {}

  public login(credentials) {
    if (credentials.username === null || credentials.password === null) {
      return Observable.throw("Please insert credentials.");
    } else {
      return Observable.create(observer => {
        this.http.post(AuthServiceProvider.LOGIN_URL, credentials)
        .map(res => res.json())
        .subscribe( data => {
          if (data.access_token) {
            this.token = 'Bearer ' + data.access_token;
            this.access = true;
          } else {
            this.access = false;
          }
        });

        setTimeout(() => {
              observer.next(this.access);
          }, 500);

        setTimeout(() => {
              observer.complete();
          }, 1000);


      }, err => console.error(err));
    }
  }

И login.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, AlertController, LoadingController, Loading } from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { HomePage } from '../home/home';
import { RegisterPage } from '../register/register';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  loading: Loading;
  userData = { username: '', password: '' };

  constructor(
    public nav: NavController,
    private auth: AuthServiceProvider,
    private alertCtrl: AlertController,
    private loadingCtrl: LoadingController
  ) {}

  public createAccount() {
    this.nav.push('RegisterPage');
  }

  public login() {
    console.log(this.userData);
    this.showLoading()
    this.auth.login(this.userData).subscribe(allowed => {
      if (allowed) {
        this.nav.setRoot(HomePage);
      } else {
        this.showError("These credentials do not match our records.");
      }
    },
      error => {
        this.showError(error);
      });
  }

  showLoading() {
    this.loading = this.loadingCtrl.create({
      content: 'Please wait...',
      dismissOnPageChange: true
    });
    this.loading.present();
  }

  showError(text) {
    this.loading.dismiss();

    let alert = this.alertCtrl.create({
      title: 'Fail',
      subTitle: text,
      buttons: ['OK']
    });
    alert.present();
  }
}

IЯ попытался создать прокси-сервер в моем файле ionic.config.json и изменить URL-адреса в auth-service.ts.Никаких кубиков.

{
  "name": "MyApp",
  "integrations": {
    "cordova": {}
  },
  "type": "ionic-angular",
  "proxies" : [
    {
      "path" : "/api/",
      "proxyUrl" : "http://example.com/api/"
    }
  ]
}

Как мне исправить это?

Я использую OSX 10.12.6, Ionic 3 и редактирую в Atom.

Answer 1

У меня была похожая проблема при создании ионного приложения с opencart php backend.решил эту проблему, добавив следующий headers к маршруту, с которого я запрашивал данные.

header('Access-Control-Allow-Origin:*'); 
header('Access-Control-Allow-Headers:X-Request-With');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

У меня нет опыта работы с slim framework, ниже приведен пример на обычном php, просто для примера.

пример:

Я бы предложил удалить эти headers записи из файла .htaccess, которые могут создать дополнительные проблемы.

Answer 2

Это распространенная проблема CORS.Вы можете воспользоваться помощью файла proxy.conf.json.В этом файле вы можете указать и отложить вызовы API для прохождения проблемы CORS.Но имейте в виду, это полезно для среды разработки.