Ionic v2 + CORS Preflight 访问控制允许方法答案

【问题标题】：Ionic v2 + CORS Preflight Access-Control-Allow-MethodsIonic v2 + CORS Preflight 访问控制允许方法
【发布时间】：2017-06-09 18:10:55
【问题描述】：

通过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 调用的库中，我已将基本 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""

似乎没有通过代理路径。

【问题讨论】：

标签： javascript typescript ionic-framework cors

【解决方案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 post：

HTTP.post(url, parameters, headers)

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

奇怪的是，chrome 的标准 CORS 扩展并没有解决 CORS 问题。
是的。但是，当您尝试上传并使用 ionicview 应用程序时，似乎仍然存在 CORS 问题。 CORS 是我对 Ionic 最讨厌的东西！
@JGFMK 那是因为某些 codova 插件在 ionic 视图中不起作用..您应该检查在 ionic 视图中是否允许处理 ionic 应用程序中的 cors 的 cordova-plugin-whitelist 以及是否您已经安装了它，因为从 cordova v4.x 开始，插件不会像以前的版本那样自动添加。

【解决方案3】：

解决了。将 BaseURL 常量 (PRE_LIVE_BASE) 显式设置为 http://localhost:8100/api 可解决此问题。现在所有请求都通过代理别名传递，颠覆了 CORS 问题。

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

【讨论】：