Question

通过ionic serve和ionic run -l与外部API进行通信时出现问题，基本上是使用本地服务器的任何内容。

我已经按照指南@ http://blog.ionic.io/handling-cors-issues-in-ionic/提供了一个处理Ionic 1项目中的问题的选项，但我很难让它在v2项目中运行。

Fetch API cannot load https://test.api.promisepay.com/items/100fd4a0-0538-11e6-b512-3e1d05defe79/make_payment. Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.

我无法控制API如何处理这些请求，因为它由PromisePay控制。

跟随StackOverflow上最接近可能的解决方案：CORS with Firebase+IONIC2+Angularjs: No 'Access-Control-Allow-Origin' still exists

我已将ionic.config.json更新为

{
  "name": "project",
  "app_id": "xxxxxxx",
  "proxies": [{
    "path": "/api",
    "proxyUrl": "https://test.api.promisepay.com"
  }]
}

在进行http调用的库中，我已将基本网址更新为const PRE_LIVE_API = '/api';

请求方法如下所示：

let Requester = class Requester {
  constructor() {
    let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    this.config = config;
    const baseUrl = PRE_LIVE_API;
    this.log(`API endpoint: ${ baseUrl }`);
    this.client = _requestPromise2.default.defaults({
      baseUrl: baseUrl,
      auth: {
        user: config.userName,
        pass: config.token
      },
      headers: {
        Accept: 'application/json',
        Authorization: `basic ${ config.apiToken }`
      },
      resolveWithFullResponse: true
    });
  }

在拨打最基本的API端点/status/时，我现在收到以下错误：

"Error: Invalid URI "/api/status""

似乎代理路径没有通过。

Answer 1

当我尝试使用MailGun使用REST API发送电子邮件时，我遇到了同样的问题。

解决方案是使用HTTP而不是http。 ionic 2提供类[HTTP]：http://ionicframework.com/docs/v2/native/http/。

在项目根文件夹中，从终端运行此命令：

ionic plugin add cordova-plugin-http

在您的.ts文件中：

import { HTTP } from 'ionic-native';

然后，无论您希望使用基本身份验证发送HTTP post / get，请使用以下命令：

HTTP.useBasicAuth(username, password)
//replace username and password with your basic auth credentials

最后，使用此方法发送HTTP帖子：

HTTP.post(url, parameters, headers)

希望这有帮助！祝你好运！

Answer 2

解决。将BaseURL常量（PRE_LIVE_BASE）显式设置为http://localhost:8100/api可以解决问题。现在所有请求都通过代理别名传递并破坏CORS问题。

这种方法的唯一缺点是，我必须在node_modules中更改属于包的一部分的变量，这将在以后的任何更新期间被覆盖。所以我应该创建自己的fork来获得更清洁的解决方案。

Answer 3

对于调用网址为http://localhost的开发目的，浏览器不允许跨源请求，但是当您构建应用并在移动设备上运行时，它将开始工作。

为了发展， 1.在Chrome浏览器中安装CORS插件/扩展，这将有助于克服CORS问题。 2.如果提供者提供JSONP接口而不是正常的get / post，您将能够克服CORS问题。

我更喜欢使用第一个选项，因为没有很多api提供jsonP接口。

部署，您无需担心构建应用程序和在您的手机中运行它，您将不会遇到同样的问题。

Ionic v2 + CORS预检访问控制允许方法

3 个答案: