处理 Ionic 中的 CORS 问题 [英] Handling CORS Issues in Ionic

问题描述

我正在使用我们的 API 服务器脚本创建一个 API，并尝试与 IONIC 框架应用程序上的 API 进行通信.我正在工作，但它不断提出跨源阻止错误:

解决方案

当使用 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 并添加以下 proxy 设置.

<代码>{"name": "项目名称","app_id": "xyz-projectid",v2":真，打字稿":真的，代理":[{"路径": "/api","proxyUrl": "https://the-real-api-host.com"}]}

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

更新对 API 端点的引用

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

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

注意:记得重启服务器(ionic serve)，否则你会从你的 API 调用中得到 404，因为它还没有被代理.

I am creating an API with our API server script and am trying to communicate with the API on the IONIC framework application. I am working but it keeps on bringing up the cross-origin blocked error:

解决方案

When developing locally using ionic serve or ionic run/emulate -l -c with livereload enabled, ionic creates a local dev server at port 8100 by default (http://localhost:8100/ ). The origin in this case is localhost:8100 , which when you contact an external service via HTTP with CORS enabled, they deem the request not trustworthy and therefor reject it.

As suggested by Ionic themselves (http://blog.ionic.io/handling-cors-issues-in-ionic/) , you can create a proxy alias within the Ionic app to route the API calls via, avoiding the origin issue altogether, however, their guide was specific for Ionic 1, so here is an update for Ionic v2.

Creating a Proxy in Ionic v2

Open ionic.config.json and add in the following proxies setup.

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

In this instance, we are creating a path within the ionic app at /api ,which will forward requests to the endpoint https://the-real-api-host.com . If you wanted to use a different api endpoint, for example http://my-custom-api.com/api/v2/ , you could insert it into proxyUrl instead.

Updating References to API Endpoint

In your app code, you now need to update all the references of the base URL for the API endpoint at https://the-real-api-host.com with /api . A call to /api should be detected when in Ionic serve, and proxied to the real address.

Each projects implementation may vary. In my case, I did not have control of the API, as it was an external service, so I could not control the CORS handling/responses myself.

Note: remember to restart the server (ionic serve) or you will get 404's from your API call because it will not yet be proxying.

这篇关于处理 Ionic 中的 CORS 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！