第三方库通过Ajax调用离子CORS

时间:2019-04-17 03:30:27

标签: ionic-framework ionic3 wkwebview

通过第三方库(普通js库,Oracle MCS)进行Ajax调用时,
显示了CORS错误。
Origin ionic://localhost is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load https://x.mobile.ocp.oraclecloud.com/mobile/platform/users/login due to access control checks

据我了解,webview引擎认为我正在浏览本地主机以查找离子页面,
禁止进入其他地方。

这是一个常见问题。
下面是尝试的方法:

  1. 添加索引内容策略标头
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
  2. 将本地主机和远程地址列入白名单
    <allow-navigation href="https://x.mobile.ocp.oraclecloud.com:443" />
    <allow-navigation href="http://localhost:8080" />

解决方法:
1.使用UIWebview
不赞成,因为它已被弃用
2.使用cordova-plugin-advanced-http
不适用于第三方拨打的电话
3.使用ionic.config.json中的离子本地代理进行重定向 不适用,因为通话是由第三方进行的,因此无法修改通话

示例测试用例:

let xhr = new XMLHttpRequest();
        xhr.open("POST", "https://x.mobile.ocp.oraclecloud.com/mobile/platform/users/login");
        xhr.send();

希望看到有关使用本机Ajax方法进行Ajax调用的建议。

1 个答案:

答案 0 :(得分:0)

我建议使用本机http:

安装插件(ionic3):

$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http@4 

使用发布方法ref

替代link。它似乎很完美,因为它将在浏览器(使用angular客户端)中运行,并且在设备中使用本机http运行。