Failed to open source for Open weather API?

Question

So I am trying to build a simple weather app using Open Weather API, this is my first attempt to build anything with an API. The API key should be valid however I keep receiving this error messing in chrome console when trying to enter a city name. My JavaScript is below the error message, I'm not sure if the issue is in the code or I am somehow linking the source wrong for the API key or base. Any advice would be much appreciated!

(index):1 Access to fetch at 'https://openweathermap.org/data/2.5/weatherweather?q=London&units=metric&APPID=' from origin 'http://127.0.0.1:5500' 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.

const api = {
  key: "", 
  base: "https://openweathermap.org/data/2.5/weather"
}

const searchbox = document.querySelector('.search-box'); 
searchbox.addEventListener('keypress', setQuery); 

function setQuery(evt) {
  if (evt.keyCode == 13) {
    getResults(searchbox.value); 
    console.log(searchbox.value); 
  }
}

function getResults (query) {
  fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
    .then(weather => {
      return weather.json(); 
    }).then(displayResults); 
}

function displayResults (weather) {
  console.log(weather); 
}

It is not a good practice to share your API key publicly if it's the original one. — Masood, Apr 22 '21 at 11:34
Does this answer your question? [Weather API request cors error](https://stackoverflow.com/questions/41215140/weather-api-request-cors-error) — Masood, Apr 22 '21 at 11:36
Thanks for the heads up! @Masood I'm still very much a newbie. I made some edits and cut my keys out of the code and error message. — Jon_Truss90, Apr 22 '21 at 11:37
Are you _sure_ the API endpoint is `https://openweathermap.org/data/2.5/weatherweather` (with double `weather`)? — AKX, Apr 22 '21 at 11:38
You should get to the openweathermap.org API docs for more details — Masood, Apr 22 '21 at 11:39
Documentations are best instructors while using APIs, because they know well how their API works. — Masood, Apr 22 '21 at 11:39

score 0 · Answer 1 · answered Apr 22 '21 at 11:40

This is a CORS error. Cross-Origin Resource Sharing is an HTTP-header-based mechanism that allows a server to indicate any other origins than its own from which a browser should permit loading of resources.

Now, coming back to your problem, one easy fix is to use a CORS proxy. You can use the following-

https://cors-anywhere.herokuapp.com/http://api.openweathermap.org...

Also, not sure if this would work, you can check if there is an option to permit IP addresses in your API settings. If so, then add localhost to that list.

Note that third-party CORS proxies are often very slow and come with a wide range of security issues. — mousetail, Apr 22 '21 at 12:39

Failed to open source for Open weather API?

1 Answers1