用离子交换技术处理CORS问题

Question

我正在用我们的API服务器脚本创建一个API，并试图在离子型框架应用程序上与API进行通信。我正在工作，但它不断地出现跨源阻塞错误：

​

​

Answer 1

当在启用了肝负荷的情况下使用ionic serve或ionic run/emulate -l -c在本地开发时，离子型在默认情况下会在端口8100 (http://localhost:8100/ )创建本地开发服务器。本例中的origin是localhost:8100，当您通过HTTP与启用CORS的外部服务联系时，他们认为请求不值得信任，因此拒绝它。

正如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端点的引用

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

每个项目的执行情况可能不同。在我的例子中，我没有对API的控制，因为它是一个外部服务，所以我无法自己控制CORS处理/响应。

注意：记得重新启动服务器(ionic serve)，否则就会从API调用中得到404，因为它还没有代理。

Answer 2

如果您无法更改服务器配置，则应使用Http本地插件执行来自移动设备的Http请求，以防止cors问题。然而，在web环境中，您仍然需要使用HtttClient的。幸运的是，通过离子-本机-http-连接-后端库，您可以在两个环境中使用相同的HttpClient服务，如果应用程序是从移动设备执行的，则将在内部使用Http本机。这是一种包装纸。

Answer 3

创建代理只适用于使用ionic -serve在浏览器上运行Ionic时。CORS问题在您的设备上运行时仍然是一个问题，特别是在iOS和WKWebView上。

在这些情况下，您可以使用Cordova的本地HTTP插件。

详见此处：

https://hackernoon.com/a-practical-solution-for-cors-cross-origin-resource-sharing-issues-in-ionic-3-and-cordova-2112fc282664