How To Enable Cross origin Request in ASP.Net Web API

In this Article we are going to learn how we can enable cross origin request in ASP.Net Web API. We know that ASP.Net Web API is platform independent. Recently, I came across a need calling our web API in mobile application. Here I am going to use two application once is asp.net Web application and another once is Mobile Application which made Ionic platform.

Background:
Cross (Cross-origin resource Sharing) is a World Wide Web Consortium. Basically it is considered part’s HTML5. Mobile app will call XML Http Request for Http verb (GET, POST, PUT, Delete, etc.) to the ASP.Net Web application by using API. By Default Cross origin Request is disable in ASP.Net Web API. But when we need call ASP.Net Web API then it needs to be enable. We will more focus our ASP.net Web API then Mobile Application in this article.

C-_Users_shamim_Desktop_Untitled-1

Fig: Request overview between Mobile App and Web API.

You can always download the source code here.
dicon Sourc Code

Firstly we will create a database

The following query can be used to create a database in your SQL Server.

To create Database

To create Table

Finally database and table both have been created. Below is the following picture of table

table

We will use some demo data for our work prospective

 

Creating ASP.NET Web Application:
Click File, New, and Project and select ASP.NET Web Application and will give project name, location and once click ok button. From the following pop up we will select the Web API with Add folders and core reference for MVC Web API will be auto selected.

AspnetApiStartImage

Once you click OK, a project MVC pattern’s structure with core references will be created.

ProjectSt

Create Entity Data Model:

Right click on your model folder and click new, select ADO.NET Entity Data Model. Follow the steps given. Once you have done the process , you can see the edmx file and other files in your model folder. Here I gave StudentMgtEntities for our Entity data model name. Now you can see a file with edmx extension have been created. Below is the following picture.

edmx

Create StudentController

Right click on your Controller folder and select Add, click Controller, select Web API 2 Controller-Empty Once click add, and give controller name. I have given my controller name “StudentController”.Wow our StudentController has been created.Below is the following code.

Our Student Controller has created.Now we will check

xmlData

Wow our API is worked.we got XML format data.but we will work with json format. we have to change in WebApiConfig Class for json format data.below is the following Code.

Actually, I have add two line for json data.

Again we will check our API

jsondata

Ok, API has given json data. It is work correctly.

Now we will call this API in our mobile application which made by ionic platform.

ionicplat

Now we will run our mobile app. how we run our mobile app we can see below picture.

runionic

We can see below screen in our browser.

mobileApplist

Wow it is run successfully but i do not see any data.Let go we find out why data could not load. I got error. the error is

error

Actually it was main focus our this post. Ok let go we solve this error.We will keep bellow code in webconfig within <system.webServer> part

We have just setup Access control allow methods like GET,POST,PUT,DELETE,OPTIONS with header and origin.

Install “Microsoft.AspNet.WebApi.Cors” package using NuGetManager.

cors

We will modify  WebApiConfig class.

Bellow lines are Register method. but this method take a parameter of HttpConfiguration class.This class represents a Configuration of httpServer instances.we have declared EnableCorsAttribute class for initializes a new instance of the EnableCorsAttribute class.But this class take three parameter for constructor like origins,headers and method

Here
1. Origins is  “http://localhost:18479”.
2.Header is “*”, It allow everything of header related issue.
3.Method is “*”,It allow everything of method related issue.

We have modified our  Global.asax class

we have added  Application_BeginRequest method in Global.asax class.Generally this method check Header’s all keys. if it contains with “Origin” and Request HttpMethod is “OPTIONS” then ends all currently buffered output to the client

Our code have finished.Now we will check

ionicresult

wow it’s work done.

Hope this will be helpful. Happy Coding ?

4 thoughts on “How To Enable Cross origin Request in ASP.Net Web API

Leave a Reply

Your email address will not be published. Required fields are marked *