CORS Errors

[vplus10]

I am writing code in HTML5, javascript, and jquery to retrieve data via the NWS api. when using a jquery ajax call I am getting "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.weather.gov/stations/KBBG/observations/latest. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response)." when it set the User-Agent as required by the api specifications. I am using the setRequestHeader to do so.
Any insight would be appreciated
Thank you.

function GetLatest(station) {
var nwsUrl = 'http://api.weather.gov/stations/'+station+'/observations/latest';
return $.ajax({
beforeSend: function(xhr) {
xhr.setRequestHeader('User-Agent', navigator.userAgent + ' vannet.noip.us([email protected])');
xhr.setRequestHeader('Accept', 'application/ld+json;version=1');
},
type: "GET",
dataType: 'json',
url: nwsUrl,
success: function(data) {
console.log(data);
current = data;
}
});
}

[ghankerson]

Me too see https://www.mprnews.org/weather I now get CORS errors I've been using this client side only for about a year

Access to fetch at 'https://api.weather.gov/alerts/active?point=44.8848,-93.2223' from origin 'https://www.mprnews.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. api.weather.gov/alerts/active?point=44.8848,-93.2223:1 Failed to load resource: net::ERR_FAILED

[KTibow]

Of course it's a workaround, but you can always use https://cors-anywhere.herokuapp.com/.

[nearwood]

I have the same issue. In case it's not clear:

The API spec says you should provide a User-Agent header, specifically a custom, unique one to avoid being involved with "security incidents" and get security notifications.

But if you provide this, it is no longer a "simple request" for CORS, and requires a pre-flight request. The CORS preflight response from weather.gov does not list User-Agent as an acceptable header, causing the main request to fail if User-Agent is provided.

In other words, to actually use the API you cannot specify a User-Agent header (a custom one, in code) until they fix their preflight responses.

[scadergit]

@nearwood will you detail the environment that you're making the request? CORS implies you're using it within a browser, but a browser will set that for you (currently Safari and Chrome break spec and won't even let you set the user agent).

[scadergit]

@vplus10 and @ghankerson sorry this reply took too long--are you both able to make requests?

[nearwood]

I can if I omit the User-Agent, this is in Chrome and Firefox. IIRC, Chrome won't let you and will fail, Firefox fails on the CORS preflight.

I thought it was preferable to set the user-agent to something to avoid being associated with others abusing the API, etc.? Or is that just for non-browser applications?

[scadergit]

Yes, the suggestion to make it unique is for server-side applications (or proxies). Using the default UA in a client-side application is fine. (I'll update the documentation later this week to make that more clear.) We are also working on transitioning to API keys (would say by end of year, but nothing official yet).

[scadergit]

Here is a basic example that works in Chrome and Firefox: https://jsfiddle.net/4sfkL9v7/

[nearwood]

Ah, OK -- then it (in my case at least) was just an issue of not understanding the docs. Thanks!

[BenGoliwas]

I'm unable to resolve this issue. I would really appreciate some help. Is it possible to send the headers with JavaScript? I'm trying to use something like this:

        xmlhttp.setRequestHeader('User-agent', 'MyWeatherApp');
        xmlhttp.setRequestHeader('Accept', 'application/ld+json;version=1');

but still getting that error. I have also tried sending it via php first, but the app is in JavaScript.

[scadergit]

@BenGoliwas without the whole xmlhttp block I can't tell exactly, but that works if used correctly. I've updated my example to demonstrate: https://jsfiddle.net/4sfkL9v7/. Note the setRequestHeader has to come after the "open" but before the "send."

[BenGoliwas]

I really appreciate you answering this. That is still not working for me.

Access to fetch at 'https://api.weather.gov/alerts/active' from origin 'https://the-sprinter.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
test.html:8 GET https://api.weather.gov/alerts/active net::ERR_FAILED
(anonymous) @ test.html:8
test.html:1 Uncaught (in promise) TypeError: Failed to fetch

Is it possible for you to show a complete JavaScript file? Must the header be sent with php or some other server-side language? This is my current state. If you're able, can you tell me how to get this to work? It is most appreciated...

array( 'method'=>"GET", 'header'=>"Accept: application/geo+json;version=1\r\n" . "User-agent: $UserAgent\r\n" ) ); $context = stream_context_create($opts); ?> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } </style> <script>

//START CLOCK
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";

var day = new Array();
    day[0] = "Monday";
    day[1] = "Tuesday";
    day[2] = "Wednesday";
    day[3] = "Thursday";
    day[4] = "Friday";
    day[5] = "Saturday";
    day[6] = "Sunday";

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();    

if(h > 12) {
    var h = h - 12;
    var ap = " PM";
} else {
    var ap = " AM";
}
if(m < 10) {
    m = "0" + m;
}    

var h = h+":"+m+ap;

var pmonth = month[today.getMonth()];
var mday = today.getDate();
var pday = day[today.getDay()];
var pyear = today.getFullYear();
var tz = today.getTimezoneOffset();

document.getElementById('mainData').innerHTML = 
    pday + " " + pmonth + " " + mday + ", " + pyear + "<br>" + h + "<br>";

}
//END CLOCK

//SET GLOBAL VARIABLE FOR THE SECOND CALL
var currentConditions;
var city;
var state;
var bgcolor;

//GET LOCATION
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
mainData.innerHTML = "Geolocation is not supported by this browser.";
}

//GET INITIAL CALL
function showPosition(position) {
//Assemble Weather.gov JSON CALL
weatherData = "https://api.weather.gov/points/" + position.coords.latitude + "," + position.coords.longitude;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
// GET LOCATION & Call FOR FORECAST
window.forecastData = myObj.properties.forecast;

            var city = myObj.properties.relativeLocation.properties.city;
            var state = myObj.properties.relativeLocation.properties.state;
                      
            //    PRINT URL IN THE LINK
            var a = document.getElementById('jsonlink');
            a.setAttribute("href", forecastData); 

//GET FORECAST
// Assemble Weather.gov FORECAST CALL
var forecast = new XMLHttpRequest();
forecast.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var forecastRes = JSON.parse(this.responseText);
// PRINT CURRENT CONDITIONS
document.getElementById("mainData").innerHTML += "In " +
city + ", " + state + " " + forecastRes.properties.periods[0].shortForecast + "
Current Conditions: " +
forecastRes.properties.periods[0].detailedForecast;
//IS IT DAY?
var isDay = forecastRes.properties.periods[0].isDaytime;

                        if(isDay == true) {
                            document.getElementById("goodDay").innerHTML += "<br>Good Day!";
                        } else {
                            document.getElementById("goodDay").innerHTML += "<br>Good Evening!";
                        }
                // GET CURRENT ICON
                        var icon = forecastRes.properties.periods[0].shortForecast;
                        
                        if(icon == "Mostly Sunny") {
                            var show_icon = "clear-day.png";
                            var bgcolor = "#5f87af";
                        } else if(icon == "Sunny") {
                            var show_icon = "clear-day.png";
                            var bgcolor = "#5f87af";
                        } else if (icon == "Rain Showers") {
                            var show_icon = "rain.png";
                            var bgcolor = "#3d4a5d";
                        } else if (icon == "Chance Rain Showers then Partly Sunny") {
                            var show_icon = "rainThenSun.png";
                            var bgcolor = "#3d4a5d";
                        } else if (icon == "Clear") {
                            var show_icon = "new-moon.png";
                            var bgcolor = "#3e4c60";                                
                        }

                        document.getElementById("main").style.backgroundColor = bgcolor;
                        document.getElementById("mainData").innerHTML += '<img src="' + show_icon + '">';
                        }
                }
                forecast.open("GET", window.forecastData, true);
                forecast.send();
        }
    }
                //Make Call to get grid cords and location
                xmlhttp.open("GET", weatherData, true);
                xmlhttp.send();     
                }
             }

window.onload=function(){
getLocation();
startTime();
//showForecast();
}
</script>

[BenGoliwas]

And then it's now working for me. Should it do that (sometimes work / sometimes not)?

[BenGoliwas]

Not working on Safari.