处理离子中的CORS问题

Posted 2023-01-14

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

答案

[在启用livereload的情况下使用ionic serve或ionic run/emulate -l -c在本地进行开发时，ionic默认在端口8100（http://localhost:8100/）上创建本地开发服务器。在这种情况下，origin是localhost:8100，当您通过启用了CORS的HTTP通过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"
  ]

在这种情况下，我们将在ionic应用程序中的/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的所有引用。在进行离子服务时，应检测到对/api的呼叫，并将其代理到真实地址。

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

[注意：请记住重新启动服务器（ionic serve），否则您将通过API调用获取404，因为它尚未进行代理。

另一答案

仅在使用ionic -serve在浏览器上运行Ionic时，才创建代理。当您在设备上运行，特别是在带有WKWebView的ios上运行时，CORS问题仍然是一个问题。

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

请参阅此处了解详细信息：

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

另一答案

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

另一答案

这个问题只是在开发阶段，最好的解决方法是在chrome中安装“ Allow-Control-Allow-Origin”扩展。

另一答案

Cors错误只能从服务器端解决。但是可以，仅对于浏览器，我们可以通过安装cors扩展名来解决它，但是对于设备，只能从服务器端进行]

另一答案

最适合我的解决方案是使用ionic-native http。点击链接检查其实施情况-https://www.freakyjolly.com/ionic-4-native-http-plugin-tutorial-with-example/