En mi página web aquí , combino un montón de API meteorológicas en una sola página. Recientemente he estado experimentando con la API de weather.gov y ha funcionado con gran éxito.
Sin embargo, hay algunos datos que quiero consultar, que weather.gov no proporcionará a través de una simple solicitud de API. Por ejemplo, si ingresa un código postal en mi página web vinculada anteriormente y obtiene los datos meteorológicos para una ubicación, puede desplazarse hacia abajo y ver un gráfico con varios elementos meteorológicos. Esto lo proporciona weather.gov, pero no se proporciona a través de una solicitud de API JSON. Tuve que cargar la página web con el gráfico con $.get() , y luego analizar la salida HTML resultante para extraer todas las etiquetas <img> y luego obtener la correcta. Este es el código que usé para eso:
// 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); });Este código eliminará todas las imágenes de esa página web que genera el gráfico, las almacenará en una matriz y luego recuperará el décimo elemento de la matriz, el elemento donde está mi imagen deseada.
Sin embargo, si reemplazo la URL en el $.get() anterior con una URL diferente, en este caso https://www.weather.gov/lwx/ , aparece el error de la consola.
XMLHttpRequest cannot load https://www.weather.gov/lwx/ due to access control checks. No creo que sea un problema de http frente a https , ya que ambas URL son https pero solo una funciona.
Si alguien tiene alguna idea de cuál puede ser el problema, agradecería su ayuda. Puede tener algo que ver con los encabezados, pero no estoy seguro y no sabría cómo implementarlos de todos modos.
El sitio que está intentando cargar está en un dominio diferente, por lo que debe seguir las reglas de control de acceso
Solo puede cargar ciertos tipos de recursos sin él
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
Duplicado de: Origin no está permitido por Access-Control-Allow-Origin