在Windows 10(UWP)上Ionic 3 Cordova ajax调用失败 [英] Ionic 3 Cordova ajax calls fail on Windows 10 (UWP)

查看:235
本文介绍了在Windows 10(UWP)上Ionic 3 Cordova ajax调用失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我之前试图问这个问题,买不到真正的答案,现在已经挣扎了一个多月。



我无法让我的ajax调用工作在为Windows 10 UWP构建的Ionic 3 Cordova应用程序上。他们可以访问localhost,但不能访问任何外部连接。



该应用程序在Android和iOS上均可正常运行。



我试图在我的开发本地测试机。我使用证书(已购买)签署应用程序,安装此证书,构建Windows应用程序,并能够打开构建的 CordovaApp.Windows10_1.0.1.1_x86.appxupload ,然后双击要安装的嵌入式 CordovaApp.Windows10_1.0.1.1_x86.appx 文件,该文件成功完成。安装表明应用程序需要访问互联网。



config.xml 中,我有以下标记,如在别处建议...

 < allow-navigation href =*/> 
< access origin =*/>

但是,当我运行时,http.get调用只返回 0 没有其他信息。我可以在Visual Studio中运行,并查看返回的错误对象,除了 0 返回之外,不再获取更多信息。



我已经运行了fiddler,启用了https解密,如这里,但我在响应标题中看到的只是

  HTTP / 1.0 200建立连接
FiddlerGateway:直接
开始时间:13:44:21.686
连接:关闭

主要结果视图实际上显示 200 ,所以我认为这不会向我显示任何真实内容。



我在完全失败。我没有其他地方可以搜索。我可以缺少什么?



我是否可以在Windows 10机器上使用外部ajax,当我在这里安装应用程序时?我还没有在商店试过,因为我不想上传,直到我知道它有效。



任何建议都会受到极大的欢迎。肯定有人有一个Ionic 3应用程序访问外部ajax吗?



提前感谢您的任何帮助



[更新1]



如果我在同一台机器上运行应用程序,只需使用Ionic服务(因此它只是在浏览器中运行而不是托管在UWP中,ajax调用也可以正常工作。



[更新2]



我现在使用Visual Studio模板创建了一个Cordova应用程序,因此将所有其他框架排除在外。



我使用vanilla JavaScript进行休息调用...

  document.addEventListener('deviceready',callUrl,false); 

函数callUrl(){

console.log('callUrl');
var xhr = new XMLHttpRequest();
xhr.open('GET','https://myserveraddress.com/myapp/testroute');
xhr.send(null);

xhr.onreadystatechange = function(){
var DONE = 4; // readyState 4表示请求已完成。
var OK = 200; //状态200是成功返回。
if(xhr.readyState === DONE){
if(xhr.status === OK)
console.log(xhr.responseText);
} else {
console.log('错误:'+ xhr.status);
}
}
};

我在调试器中运行它,即使在这里我收到错误(状态代码为0)。



当我打开构建包并查看 cordova_plugins.js 文件时,我注意到了另一件事。 / p>

我的Ionic应用程序具有以下内容......

  cordova.define ('cordova / plugin_list',函数(require,exports,module){
module.exports = [
{
id:cordova-plugin-console.logger,
file:plugins / cordova-plugin-console / www / logger.js,
pluginId:cordova-plugin-console,
clobbers:[
cordova.logger
]
},
{
id:cordova-plugin-console.console,
file:plugins /cordova-plugin-console/www/console-via-logger.js,
pluginId:cordova-plugin-console,
clobbers:[
conso le
]
},
{
id:cordova-plugin-device.device,
file:plugins / cordova-plugin -device / www / device.js,
pluginId:cordova-plugin-device,
clobbers:[
device
]
},
{
id:cordova-plugin-device.DeviceProxy,
file:plugins / cordova-plugin-device / src / windows / DeviceProxy.js ,
pluginId:cordova-plugin-device,
合并:[

]
},
{
id:cordova-plugin-splashscreen.SplashScreen,
file:plugins / cordova-plugin-splashscreen / www / splashscreen.js,
pluginId: cordova-plugin-splashscreen,
clobbers:[
navigator.splashscreen
]
},
{
id:cordova-plugin-splashscreen.SplashScreenProxy,
file:plugins / cordova-plugin-splashscreen / www / windows / SplashScreenProxy.js,
pluginId:cordova -plugin-splashscreen,
运行:true
},
{
id:cordova-plugin-statusbar.statusbar,
file :plugins / cordova-plugin-statusbar / www / statusbar.js,
pluginId:cordova-plugin-statusbar,
clobbers:[
窗口。 StatusBar
]
},
{
id:cordova-plugin-statusbar.StatusBarProxy,
file:plugins / cordova-plugin -statusbar / src / windows / StatusBarProxy.js,
pluginId:cordova-plugin-statusbar,
运行:true
},
{
id:ionic-plugin-keyboard.KeyboardProxy,
file:plugins / ionic-plugin-keyboard / src / windows / Ke yboardProxy.js,
pluginId:ionic-plugin-keyboard,
clobbers:[
cordova.plugins.Keyboard
],
运行:true
}
];
module.exports.metadata =
// TOP OF METADATA
{
cordova-plugin-console:1.0.5,
cordova-plugin -device:1.1.4,
cordova-plugin-splashscreen:4.0.3,
cordova-plugin-statusbar:2.2.2,
cordova-plugin-whitelist:1.3.1,
ionic-plugin-keyboard:2.2.1
};
//元数据底部
});

现在,我注意到 module.exports.metadata中的每个插件还在 module.exports 中有一个条目,除了 cordova-plugin-whitelist



如果我为在VS中创建的Corvoda应用程序打开相同的文件,我会看到以下内容......

  cordova.define('cordova / plugin_list',function(require,exports,module){
module.exports = [];
module.exports.metadata =
// TOP OF METADATA
{
cordova-plugin-whitelist:1.2.2
};
//元数据底部
}) ;

因此白名单插件也没有其他内容



这里有什么东西不见了?这个白名单插件是不是可以正确安装?

解决方案

我有类似的情况,我的ajax调用在TEST中工作正常,但当我搬到PROD时,他们会失败。



答案最终被追踪为我试图访问的服务器上缺少的中间证书。 TEST有证书,PROD没有。



我希望这有帮助。


I have attempted to ask this previously, buy got no real answers, and have now been struggling for over a month.

I just cannot get my ajax calls to work on an Ionic 3 Cordova application built for a Windows 10 UWP. They can access localhost, but not any outside connections.

The application works fine on both Android and iOS.

I am trying to test this locally on my dev machine. I use a certificate (bought) to sign the application, install this certificate, build the application for Windows, and am able to open up the built CordovaApp.Windows10_1.0.1.1_x86.appxupload, and then double click the embedded CordovaApp.Windows10_1.0.1.1_x86.appx file to install, which completes successfully. The install indicates the app need internet access.

In the config.xml, I have the following tags, as suggested elsewhere...

 <allow-navigation href="*" />
 <access origin="*" />

However, when I run, the http.get call just returns 0 with no other information. I can run in Visual Studio, and look at the returned error object, and get no further info, apart from this 0 return.

I have run fiddler, enabled the https decryption as explained here, but all I see in the response header is

HTTP/1.0 200 Connection Established
FiddlerGateway: Direct
StartTime: 13:44:21.686
Connection: close

The result in the main view actually shows 200, so I don't think this is showing me anything real.

I am at a complete loss. I have no where else to search. What could I be missing?

Should I be able to use external ajax on a Windows 10 machine, when I have sideloaded the application as here? I haven't tried from the store yet, as I don't want to upload until I know it works.

Any suggestions desperately welcomed. Surely someone has had an Ionic 3 application accessing external ajax working?

Thanks in advance for any help

[UPDATE 1]

If I run the application on the same machine, just using Ionic serve (so it just runs in the browser rather than hosted in the UWP), the ajax calls also work fine.

[UPDATE 2]

I have now created a Cordova application using the Visual Studio template, so taking all other frameworks out of the equation.

I used vanilla JavaScript to do my rest call...

 document.addEventListener('deviceready', callUrl, false);

 function callUrl() {

  console.log('callUrl'); 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://myserveraddress.com/myapp/testroute');
  xhr.send(null);

  xhr.onreadystatechange = function () {
    var DONE = 4; // readyState 4 means the request is done.
    var OK = 200; // status 200 is a successful return.
    if (xhr.readyState === DONE) {
      if (xhr.status === OK)
        console.log(xhr.responseText); 
    } else {
      console.log('Error: ' + xhr.status); 
    }
  }
 };

I run this in the debugger, and even here I get an error (status code of 0).

Another thing I noticed when I open up the build package and look at the cordova_plugins.js file..

My Ionic app has the following...

cordova.define('cordova/plugin_list', function(require, exports, module) {
    module.exports = [
        {
            "id": "cordova-plugin-console.logger",
            "file": "plugins/cordova-plugin-console/www/logger.js",
            "pluginId": "cordova-plugin-console",
            "clobbers": [
                "cordova.logger"
            ]
        },
        {
            "id": "cordova-plugin-console.console",
            "file": "plugins/cordova-plugin-console/www/console-via-logger.js",
            "pluginId": "cordova-plugin-console",
            "clobbers": [
                "console"
            ]
        },
        {
            "id": "cordova-plugin-device.device",
            "file": "plugins/cordova-plugin-device/www/device.js",
            "pluginId": "cordova-plugin-device",
            "clobbers": [
                "device"
            ]
        },
        {
            "id": "cordova-plugin-device.DeviceProxy",
            "file": "plugins/cordova-plugin-device/src/windows/DeviceProxy.js",
            "pluginId": "cordova-plugin-device",
            "merges": [
                ""
            ]
        },
        {
            "id": "cordova-plugin-splashscreen.SplashScreen",
            "file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
            "pluginId": "cordova-plugin-splashscreen",
            "clobbers": [
                "navigator.splashscreen"
            ]
        },
        {
            "id": "cordova-plugin-splashscreen.SplashScreenProxy",
            "file": "plugins/cordova-plugin-splashscreen/www/windows/SplashScreenProxy.js",
            "pluginId": "cordova-plugin-splashscreen",
            "runs": true
        },
        {
            "id": "cordova-plugin-statusbar.statusbar",
            "file": "plugins/cordova-plugin-statusbar/www/statusbar.js",
            "pluginId": "cordova-plugin-statusbar",
            "clobbers": [
                "window.StatusBar"
            ]
        },
        {
            "id": "cordova-plugin-statusbar.StatusBarProxy",
            "file": "plugins/cordova-plugin-statusbar/src/windows/StatusBarProxy.js",
            "pluginId": "cordova-plugin-statusbar",
            "runs": true
        },
        {
            "id": "ionic-plugin-keyboard.KeyboardProxy",
            "file": "plugins/ionic-plugin-keyboard/src/windows/KeyboardProxy.js",
            "pluginId": "ionic-plugin-keyboard",
            "clobbers": [
                "cordova.plugins.Keyboard"
            ],
            "runs": true
        }
    ];
    module.exports.metadata = 
    // TOP OF METADATA
    {
        "cordova-plugin-console": "1.0.5",
        "cordova-plugin-device": "1.1.4",
        "cordova-plugin-splashscreen": "4.0.3",
        "cordova-plugin-statusbar": "2.2.2",
        "cordova-plugin-whitelist": "1.3.1",
        "ionic-plugin-keyboard": "2.2.1"
    };
    // BOTTOM OF METADATA
    });

Now, I notice every plugin in the module.exports.metadata also has an entry in the module.exports EXCEPT for cordova-plugin-whitelist!

If I open the same file for the Corvoda application created in VS, I see the following...

cordova.define('cordova/plugin_list', function(require, exports, module) {
    module.exports = [];
    module.exports.metadata = 
    // TOP OF METADATA
    {
        "cordova-plugin-whitelist": "1.2.2"
    };
    // BOTTOM OF METADATA
    }); 

So this has nothing else for the whitelist plugin as well

Could there be something missing here?? Could this white-list plugin not be installed correctly?

解决方案

I had a similar situation where my ajax calls worked fine in TEST, but when I moved to PROD, they would fail.

The answer was finally tracked down as a missing intermediary certificate on the server I was trying to access. TEST had the cert, PROD did not.

I hope this helps.

这篇关于在Windows 10(UWP)上Ionic 3 Cordova ajax调用失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆