在 Ionic 中处理 CORS 问题

Question

我正在使用我们的 API 服务器脚本创建 API，并尝试与 IONIC 框架应用程序上的 API 进行通信。我正在工作，但它不断出现跨域被阻止的错误：

原文由 olajide 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当使用 ionic serve 或 ionic run/emulate -l -c 启用 livereload 进行本地开发时，ionic 默认在端口 8100 上创建一个本地开发服务器（ http://localhost:8100/ ）。 origin 在这种情况下是 localhost:8100 ，当您通过启用了 CORS 的 HTTP 联系外部服务时，他们认为请求不可信，因此拒绝它。

正如 Ionic 自己 ( http://blog.ionic.io/handling-cors-issues-in-ionic/ ) 所建议的那样，您可以在 Ionic 应用程序中创建一个代理别名来路由 API 调用，避免 origin 问题，但是，他们的指南是针对 Ionic 1 的，所以这里是 Ionic v2 的更新。

在 Ionic v2 中创建代理

打开 ionic.config.json 并添加以下 proxies 设置。

 {
  "name": "project-name",
  "app_id": "xyz-projectid",
  "v2": true,
  "typescript": true,
  "proxies": [{
    "path": "/api",
    "proxyUrl": "https://the-real-api-host.com"
  }]
}

在这种情况下，我们在离子应用程序中创建一个路径 /api ，它将请求转发到端点 https://the-real-api-host.com 。如果您想使用不同的 api 端点，例如 http://my-custom-api.com/api/v2/ ，您可以将其插入 proxyUrl 。

更新对 API 端点的引用

在您的应用程序代码中，您现在需要将 API 端点的基本 URL 的所有引用更新为 https://the-real-api-host.com 和 /api 。在 Ionic 服务中应检测到对 /api 的调用，并代理到真实地址。

每个项目的实施可能会有所不同。就我而言，我无法控制 API，因为它是一项外部服务，所以我无法自己控制 CORS 处理/响应。

注意： 记得重启服务器（ ionic serve ），否则你的 API 调用会得到 404，因为它还没有被代理。

原文由 Phillip Hartin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您无法更改服务器配置，您应该使用 Http native 插件 从您的移动设备执行 Http 请求，以防止 cors 问题。但是，在 web 环境中，您仍然需要使用 Angular 的 HtttClient。幸运的是，借助 ionic-native-http-connection-backend 库，您可以在两种环境中使用相同的 HttpClient 服务，如果应用程序是从移动设备执行的，Http native 将在内部使用。这是一种包装纸。

原文由 José Antonio Postigo 发布，翻译遵循 CC BY-SA 4.0 许可协议