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.
The site you are trying to load is on different domain, so you must follow the Access Control rules
You can only load certain types of resources without it
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
Dupplicate of: Origin is not allowed by Access-Control-Allow-Origin