Ionic 中的 CORS 和 Ajax 请求

Question

我正在使用 Ionic 3 开发应用程序，但问题是公司的所有网络服务都基于 SOAP 请求。

在应用程序预览中，使用 ionic serve --lab，我尝试使用 Http Module 执行 ajax 请求，但每次执行请求时，我都会在控制台：

XMLHttpRequest cannot load http://example.com/soapwebservice. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

也尝试在控制台中直接使用 jQuery Ajax 和 XMLHttpRequest，但仍然出现错误。

-- 编辑

发现在设备中使用ionic cordova run android --device测试时，问题消失。在设备中，原点不存在，因为应用程序在 file:/// 上运行，而在 ionic serve 中，原点在 localhost 中，因此显示 CORS 错误.

Answer 1

就我个人而言，我更喜欢将 Android "SOAP Client" 写在 Java 中。

但仍然可以从 JavaScript 使用 SOAP 服务。

这里有一个很好的教程：

SOAP Web Services in Angular and Ionic

此示例使用 "JavaScript SOAP Client"：http://javascriptsoapclient.codeplex.com/

Answer 2

终于找到制作方法了。

在设备中使用ionic cordova run android --device测试时，问题消失。在设备中，原点不存在，因为应用程序在 file:/// 上运行，而在 ionic serve 中，原点在 localhost 中，因此显示 CORS 错误.

为了在 ionic serve 中解决这个问题，我遵循了 this amazing tutorial，它展示了如何在 Ionic 中轻松创建 proxy，并通过该代理访问其他网站。

它基本上在您的 localhost 中创建了一条路径，例如 http://localhost/api，它指向您要访问的 URL，因此您不会收到任何 CORS 错误，因为您现在正在访问同一个来源！

配置起来非常容易。正如 tutorial 所说，您只需要在 ionic.config.json 文件中添加代理配置，如示例所示：

{
    "name": "proxy-example",
    "app_id": "",
    "proxies": [
        {
            "path": "/api",
            "proxyUrl": "http://cors.api.com/api"
        }
    ]
}

现在您可以向 http://localhost:8100/api 发出 Ajax 请求！

Ionic 中的 CORS 和 Ajax 请求

CORS and Ajax requests in Ionic

javascript

android

soap

webview

android-webview

-- 编辑