Click here to Skip to main content
15,887,979 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
I have created a Web API and in the same solution I have included another MVC project (Store App) and trying to consume the web api through jquery.ajax();

I am receiving a CROS issue. But If I add the dataType: "jsonp" then I do not receive CORS issue but in console log I see the below error:

SyntaxError: missing ; before statement
{"Id":1,"Name":"Prod1","Price":10.78}

I am not getting where actually to set the CORS property at IIS or in application (in Web API or MVC Internet application)?

If I am unable to call the Web API in same solution then how would it be able to call to other devices. Please let me know what I am lacking or missing.

Below is the code description
------------------------------------------------------------------------------------------------
Solution Name: WebAPI_Demo
1. MVC 4 Web API name : WebAPI_Demo
Code:
C#
public class ProductController : ApiController
{
Product prd = new Product();
public Item Get(int id)
{
Item item = prd.AllProduct.Find(p => p.Id == id);
return item;
}
}
public class Product
{
public List<Item> AllProduct = new List<Item>();
public Product()
{
AllProduct.Add(new Item { Id = 1, Name = "Prod1", Price = 10.78 });
AllProduct.Add(new Item { Id = 2, Name = "Prod2", Price = 11.78 });
AllProduct.Add(new Item { Id = 3, Name = "Prod3", Price = 12.78 });
AllProduct.Add(new Item { Id = 4, Name = "Prod4", Price = 13.78 });
}
}

public class Item
{
public int Id { get; set; }
public string Name { get; set; }
public double Price { get; set; }
}


2. MVC 4 Internet Application name: StoreApp

Javascript on Item controller in StoreApp:

JavaScript
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnGet").click(function () {
var id = $("#txtID").val();
var hitUrl = "http://localhost:38153/api/Product/" + id;
$.ajax({
url: hitUrl,
type: "GET",
data: "",
contentType: "application/json",
dataType: "jsonp",
success: function (data) {
console.log("Success");
//console.log(data);
console.log(data.Id);
console.log(data.Name);
console.log(data.Price);
},
error: function (e) {
console.log("Failure");
alert("error: " + e);
}
});
});
});
</script>
Posted
Updated 23-Jul-14 3:10am
v2

1 solution

Add this in your web.config

C#
<system.webserver>
    <httpprotocol>
        <customheaders>
            <!-- Adding the following custom HttpHeader will help prevent CORS from stopping the Request-->
            <add name="Access-Control-Allow-Origin" value="*" />
        </customheaders>
    </httpprotocol>
</system.webserver>


But this will allow all application to hit api.
If you want to control it for your application please go through this.

http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

To enable/disable cor methodwise

http://devproconnections.com/aspnet/aspnet-web-api-tip-cors-cross-domain-requests
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900