* Create a basic XAML app using Visual Studio 2012 Update 1. VS 2012 doesn't appear to have this issue.
* Add a new html page to the project, call it "index.html".
Replace "websitewithcorsenabledhere" in index.html with a website that returns the correct CORS header to enable the xhr request from the WebView control. ie Access-Control-Allow-Origin:'*'
* Add the below code to index.html.
* Add the page to the app via MainPage.xaml
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<WebView x:Name="webView" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx-web:///index.html"/>
</Grid>
* Ensure that the app is given access to the internet in the manifest.
index.html code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="text-align:center">
<button type="button" id="btnGo">GO</button>
</div>
<div id="console"></div>
<script type="text/javascript">
var log = {},
divConsole = document.getElementById('console');
log.value = [];
log.output = function (style,args) {
var idx = 0;
if (args.length <= 0) {
return;
}
log.value.push('<div style="width:100%;' + style + '">' + '[' + new Date().toISOString() + '] ');
for (idx = 0; idx < args.length; idx++) {
log.value.push(((idx > 0) ? (' , ') : ('')) + JSON.stringify(args[idx]).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"));
}
log.value.push('</div>');
divConsole.innerHTML = log.value.join('');
}
log.trace = function () {
log.output('',arguments);
};
log.fail = function () {
log.output('color:red', arguments);
}
function sendXhr(cb) {
var request = new window.XMLHttpRequest();
request.onload = function () {
cb(request);
};
request.onerror = function (err) {
log.fail('Unable to load request, error,status,statusText', err, request.status, request.statusText, request.responseXML, request.response);
cb(request);
}
request.onreadystatechange = function () {
log.trace('readyState, status', request.readyState, request.status);
}
request.onprogress = function (progress) {
log.trace('progress', progress);
}
request.open('GET', "http://websitewithcorsenabledhere", true);
request.send();
}
document.getElementById('btnGo').onclick = function () {
log.trace('Sending request');
sendXhr(function (request) {
var headers;
log.trace('Response Headers:', request.getAllResponseHeaders());
log.trace('Response Text:', request.responseText);
headers = request.getAllResponseHeaders().split("\r\n");
headers.forEach(function (item) {
if (item && (item.length > 0) && (false === /^\w+.*/.test(item))) {
log.fail('FAIL. The header string is not properly formatted:', item);
}
});
});
};
</script>
</body>
</html>