Access MVC web api from sharepoint

See more:

SharePoint

SharePoint2013

Hi when I am trying to access MVC web api from SharePoint using JavaScript getting error.

What I have tried:

I followed below steps –

1. Create a MVC web api using VS and hosted it in IIS, which gives below output (I don't why xml output show like that when I copy here) -

<string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">
<newdataset> <locations> <id>1 <name>Resturant1 <latitude>18.160859 <longitude>83.924561 <desciption>Resturant1 Test data <Image>blue.png</Image> <locations> <id>2 <name>Resturant2 <latitude>22.018817 <longitude>88.428955 <desciption>Resturant2 Test Data <Image>blue.png</Image> <locations> <id>3 <name>Resturant3 <latitude>21.324558 <longitude>86.824951 <desciption>Resturant3 Test Data <Image>blue.png</Image> <locations> <id>4 <name>Hotel Taj <latitude>20.318228 <longitude>86.31958 <desciption>Hotel Taj Test Data <Image>green.png</Image> <locations> <id>5 <name>Hotel Hill <latitude>25.576511 <longitude>88.253174 <desciption>Hotel Hill Test Data <Image>green.png</Image>



2. Create a SharePoint Visual Web Part and access hosted web api using below JavaScript
function GetLocations() {
$.support.cors = true;
$.ajax({
url: 'http://10.11.1.81:82/api/map/getlocations',
type: "POST",
dataType: "xml",
crossDomain: true,
dataType: "json",
contentType: "application/json",
success: function (res) {
console.log(JSON.stringify(res));
},
error: function (res) {
console.log("Bad thing happend! " + res.statusText);
}
});
}


3. Change in web.config and add below tags and save it.

<customheaders>
<add name="Access-Control-Allow-Origin" value="*">
<add name="Access-Control-Allow-Headers" value="Content-Type, Accept, X- Requested-With, X-File-Name">
<add name="Access-Control-Allow-Methods" value="GET, POST">



4. Then Deploy the WebPart and add it in a page.
5. After that it will give below errors –


SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
index.aspx
SEC7118: XMLHttpRequest for http://10.11.1.81:82/api/map/getlocations required Cross Origin Resource Sharing (CORS).
index.aspx
SEC7119: XMLHttpRequest for http://10.11.1.81:82/api/map/getlocations required CORS preflight.
index.aspx
SEC7120: Origin http://dc2:5000 not found in Access-Control-Allow-Origin header.
index.aspx
SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

index.aspx
Bad thing happend! error
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required


Please help me how to resolve the problem. Its urgent. Thanks Advance.

Regards,
Arnab