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

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

.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: '.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 .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?

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

http://wsf.cdyne./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./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./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?

• javascript
• jquery
• ajax

Share Improve this question Follow asked Nov 17, 2014 at 15:19 onTheInternetonTheInternet 7,2831313 gold badges4646 silver badges7878 bronze badges 3

• 2 This is because of Cross Origin Resource Sharing. *Edit, As @Quentin points out, it's actually Same Origin Policy - CORS is simply a way of working around the problem. – chsh Commented Nov 17, 2014 at 15:22
• 3 @chsh — No. It is because of the same origin policy. CORS is how you can turn the Same Origin Policy off. – Quentin Commented Nov 17, 2014 at 15:24
• @Quentin: Right you are. – chsh Commented Nov 17, 2014 at 15:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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).