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

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上最接近可能的解决方案：带有Firebase+IONIC2+Angularjs的CORS：不存在"访问控制-允许-来源"

的情况。

我已将ionic.config.json更新为

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

在进行 http 调用的库中，我已将基本 URL 更新为 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发送电子邮件时，我遇到了同样的问题。

Ionic 2 提供了类 [HTTP]： http://ionicframework.com/docs/v2/native/http/。

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

ionic plugin add cordova-plugin-http

在 .ts 文件中：

import { HTTP } from 'ionic-native';

然后，无论您想使用基本身份验证发送 HTTP 帖子/获取，请使用以下命令：

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

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

HTTP.post(url, parameters, headers)

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

Answer 2

对于调用 url http://localhost 的开发目的，浏览器不允许跨域请求，但当您构建应用程序并在移动设备中运行它时，它将开始工作。

为了发展，1. 在 chrome 浏览器中安装 CORS 插件/扩展程序，这将有助于解决 CORS 问题。2. 如果提供商提供 JSONP 接口而不是正常的获取/发布，您将能够克服 CORS 问题。

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

对于部署，您不必担心构建应用程序并在手机中运行它，您不会遇到同样的问题。

Answer 3

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

这种方法的唯一缺点是，我必须更改作为 node_modules 中包一部分的变量，该变量将在将来的任何更新中被覆盖。所以我可能应该创建一个自己的叉子以获得更干净的解决方案。