CODEWITHSUNDEEP
javascriptjqueryajax
onTheInternet
onTheInternet

Reputation: 7243

No 'access-control-allow-origin' header is present in AJAX request

I am using the following URL to get data for a weather app.

http://wsf.cdyne.com/WeatherWS/Weather.asmx/GetCityWeatherByZIP

I've used this API before, but this time I'm trying to load the data in using AJAX so the rest of my page doesnt reload when this data is fetched.

Here is my javascript

<script>
    $(function () {
        var zip = 16001;

        $.ajax({
            type: 'GET',
            crossDomain:'true',
            url: 'http://wsf.cdyne.com/WeatherWS/Weather.asmx/GetCityWeatherByZIP' +zip,
            success: function (data) {
                console.log("Here is the data", data);
            },
            error: function () {
                alert("Error loading data");
            }
        });
    });
</script>

I keep recieving the following error in the console. 

XMLHttpRequest cannot load http://wsf.cdyne.com/WeatherWS/Weather.asmx/GetCityWeatherByZIP16001. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:50733' is therefore not allowed access. The response had HTTP status code 500. weatherAjax.html:1

This makes it seem like their is an issue with accessing the data. But i've used this before with a simple form that the user input their zip code into. And it returned the data. The only difference now is I want to load the data using AJAX so the entire page doesn't reload. What am I doing wrong?

Upvotes: 1

Views: 3397

Answers (1)

Quentin
Quentin

Reputation: 943100

Previously you were sending the user's browser to someone else's website. They were leaving your site and all was fine.

Now you are trying to write JavaScript to instruct your visitor's browser to fetch data from someone else's website (which would use any auth/authz credentials they had) and give that data to your code.

Since the other website could be, for example, an online bank, this is forbidden unless the site you are requesting the data from gives explicit permission for you to access it.

For further reading, see the Same Origin Policy and HTTP access control (CORS).

Upvotes: 7

Related Questions