On my webpage here, I combine a bunch of weather APIs into one page. I have recently been experimenting with the weather.gov API, and it has worked to great success.
However, there are some bits of data that I want to query, that weather.gov will not provide through a simple API request. For example, if you input a zip code on my webpage linked above, and get the weather data for a location, you can scroll down to the bottom and see a chart with various weather items. This is provided by weather.gov, but is not provided through a JSON API request. I had to load the webpage with the graph with $.get(), and then parse the resulting HTML output to extract all of the <img> tags, and then get the right one. This is the code I used for that:
// gets the plotter image URL (10th in the array of images on the plotter page)
// https://stackoverflow.com/questions/43772776/
$.get(`https://forecast.weather.gov/MapClick.php?marine=0&zmx=1&zmy=1&FcstType=graphical&lat=${latitude}&lon=${longitude}&Submit=Submit`, function(data, status){
var pictures = [],
m;
var str = data,
rex = /<img[^>]+src="?([^"\s]+)"?\s*/gi;
while (m = rex.exec( str )) {
pictures.push( m[1] );
}
const allImages = [];
var index = 0;
pictures.forEach(function(picture){
allImages.push(picture);
})
var correctImage = "https://forecast.weather.gov/" + allImages[10];
console.log(correctImage);
document.getElementById('graph').setAttribute('src', correctImage);
});
This code will take all of the images off of that webpage that generates the graph, store them in an array, and then retrieve the 10th item of the array - the item where my desired image is.
However, if I replace the URL in the $.get() method above with a different URL, in this case https://www.weather.gov/lwx/, it gives me the console error
XMLHttpRequest cannot load https://www.weather.gov/lwx/ due to access control checks.
I don't think it's an issue of http vs https, as both URLs are https but only one works.
If anybody has any idea what the issue might be, I would appreciate your help. It might have something to do with headers, but I am not sure and wouldn't know how to implement them anyways.
