Question

我使用Ionic Framework提供了基本的登录表单和身份验证服务，并且不断遇到CORS问题。当我在Google Chrome上运行该应用并尝试登录时，出现此错误： HTTP preflight response error

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

这是我遇到的最常见的错误，但是在发出OPTIONS请求时也不断出错（即使我正在发出POST请求，但我听说ionic在dev浏览器中就是这样做的）。我在GoDaddy服务器上托管的Slim框架上使用了基本的REST API。我做了一些研究，每个人都在说我需要将Access-Control-Allow-Origin: "*"添加到我的.htaccess文件中。

这是我的API文件结构中的.htaccess文件：

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与Postman一起使用，并且登录和注册均正常工作。当然，我可以正确输入登录信息。

这是我的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();
  }
}

我尝试在ionic.config.json文件中创建代理服务器，并更改auth-service.ts中的URL。没有骰子。

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

我该如何解决这个问题？

我正在使用OSX 10.12.6，Ionic 3，并在Atom中进行编辑。

Answer 1

这是常见的CORS问题。您可能需要寻求proxy.conf.json文件的帮助。在此文件中，您可以指定并推迟您的API调用以传递CORS问题。但是请记住，这对于开发环境很有用。

Answer 2

在使用opencart php后端构建离子应用程序时，我遇到了类似的问题。通过在我请求数据的路由中添加以下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');

我没有使用苗条框架的经验，下面的示例是纯php，仅举一个例子。

示例：

我建议您从headers文件中删除这些.htaccess条目，这可能会导致其他问题。

Ionic Framework登录API-预检响应没有HTTP正常状态

2 个答案: