处理离子中的CORS问题

Question

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

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.例如http://my-custom-api.com/api/v2/,如果您想使用不同的api端点,则可以将其插入proxyUrl.

更新API端点的引用

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

每个项目实施可能有所不同 在我的情况下,我没有控制API,因为它是一个外部服务,所以我无法自己控制CORS处理/响应.

注意:记得重新启动服务器(ionic serve),否则您将从API调用获得404,因为它尚未代理.

Answer 2

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