ajax GET - XMLHttpRequest cannot load

Question

I'm trying to get data from a external api, but I keep getting the error message:

XMLHttpRequest cannot load... No 'Access-Control-Allow-Origin' header is present on the requested resource.

here is my code:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
        (function () {
            $.support.cors = true;
            $.ajax({
                type: "GET", url: "http://zhettoapi.azurewebsites.net/api/Values?product=Coca Cola", success: function (data) {
                    window.alert("" + data);
                    //example of setting innerHTML of object
                    document.getElementById("myElement").innerHTML = "The number is:" + data;
                }, error: function (xhr, status, error) {
                    // Display a generic error for now.
                    alert("Error: " + xhr + "   " + status + "   " + error);
                }
            });
        })();
    </script>
</head>
<body>
    <div id="myElement"></div>
</body>
</html>

The error tells you exactly the problem. The site does not allow you to make cross domain calls. https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy — epascarello, Oct 14 '14 at 17:10
Check,if that api provides `JSONP` request, then use that, it supports CORS. - http://stackoverflow.com/questions/5943630/basic-example-of-using-ajax-with-jsonp — Arindam Nayak, Oct 14 '14 at 17:22

Arindam Nayak · Accepted Answer · 2014-10-14T18:00:19.187

Since i can see that use have used azurewebsites mentioned in Get url ( "http://zhettoapi.**azurewebsites**.net/api/Values.... ), and i have some experience on that, i thought of solving your problem, even if this question was not tagged with Azure.

Assumption : You have used WebAPI.And deployed on Azure as website. ( i am sure, it is).

Since you are trying to access Azure Web API url from other domain in form of ajax.get request, it gets blocked because of cross domain ( CORS) security. So first thing here, is to make it(hosted WebAPI project) CORS enabled.

Steps to make it CORS enabled:

Install this - Install-Package Microsoft.AspNet.WebApi.Cors using NuGet
Open the file App_Start/WebApiConfig.cs. Add the following code to the WebApiConfig.Register method.
Next, add the [EnableCors] attribute to the Controller class:

With following params

[EnableCors(origins: "http://zhettoapi.azurewebsites.net", headers: "", methods: "")]
Redeploy your WebAPI project.

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

More links - http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En

score 1 · Answer 2 · answered Oct 15 '14 at 07:18

1

Thanks!

Also this tutorial was helpful(describing):

http://www.codeguru.com/csharp/.net/net_asp/using-cross-origin-resource-sharing-cors-in-asp.net-web-api.html

answered Oct 15 '14 at 07:18

Christer

2,746
3
31
50

ajax GET - XMLHttpRequest cannot load

2 Answers2