Friday, January 24, 2014

Enable Windows 8 App(HTML) to make XHR request to service hosted in different domain

Introduction

In this small article we are going to learn how to enable our windows 8 app to make a XHR request to service hosted in different domain(e.g Web API hosted in some virtual machine and app in running in my local machine). It seems simple and yes the solution is also simple and straight forward, since I'm new to Win8 app development it took time to understand the things. Lets define the problem.

Problem

First thing is I have two solutions one is Win8 javascript app solution and another one is service solution I have used Web API for it. Now, when i host my service in local IIS and access the service from my Win8 app it was working i.e i was able to get the data and response status was 200. But when i hosted the same service in some virtual machine(VM) and tried to access it was giving 404(Not found) error. SO whats the solution???

Solution

The following is my XHR request,

WinJS.xhr({
            type: "POST",
            url: "url"
            data: JSON.stringify(some_data),
            headers: {"Content-type": "application/json; charset=utf-8" },
        }).then(
            function (success) {
               // play with the data
            },
                function (error) {
                   //handle the errors
                }
        );

There is nothing wrong with the request nor with the service but thing is we have to enable capabilities of Win8 app in package.appxmanifest. In this file under Capabilities tab you can find Capabilities section in that check the Private Networks (Client & Server) check box and save it, this solves the problem.