Angular simple weather app using openweather api error

Angular Simple Weather App Using OpenWeather API Error

When developing an Angular application that utilizes the OpenWeather API for displaying weather information, you may encounter certain errors. In this article, we will discuss a common error that developers face while creating a simple weather app using Angular and OpenWeather API, and provide multiple solutions to resolve it.

The Error

The error message that you might come across when implementing the Angular weather app with OpenWeather API could be:

Access to XMLHttpRequest at 'https://api.openweathermap.org/data/2.5/weather?q={city}&appid={api_key}' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error occurs due to the Cross-Origin Resource Sharing (CORS) policy implemented by the OpenWeather API server. It restricts the access of the API from different origins, resulting in the error message mentioned above.

Solutions

There are multiple solutions to resolve this CORS error. Let’s explore each of them:

1. Proxy Configuration

One way to bypass the CORS error is by configuring a proxy in your Angular project. This involves creating a proxy configuration file and making changes to the Angular project’s configuration.

Create a file named proxy.conf.json in the root directory of your Angular project with the following content:

{
  "/api": {
    "target": "https://api.openweathermap.org",
    "secure": false,
    "changeOrigin": true
  }
}

Next, open the angular.json file in your project and add the following code under the architect > serve > options section:

"proxyConfig": "proxy.conf.json"

Now, update your API URL in the Angular service file to use the proxy. For example:

const apiUrl = '/api/data/2.5/weather?q={city}&appid={api_key}';

By utilizing the proxy configuration, the request will be redirected through the Angular development server, bypassing the CORS issue.

2. CORS Chrome Extension

If you prefer a quick solution without modifying your Angular project, you can install a CORS Chrome extension. This extension allows you to disable the CORS policy temporarily while testing your application.

Install the CORS Chrome extension from the Chrome Web Store and enable it. This will disable the CORS policy and allow your Angular app to make requests to the OpenWeather API.

3. Backend Proxy

If you have control over the backend server, you can set up a proxy on the server to handle the CORS issue. By configuring the server to include the necessary headers, you can allow requests from your Angular app.

Consult the documentation of your backend server to understand how to configure the proxy and add the required headers.

Conclusion

Encountering the CORS error while developing an Angular weather app using the OpenWeather API is a common issue. In this article, we discussed multiple solutions to resolve the error, including configuring a proxy, using a CORS Chrome extension, and setting up a backend proxy. Choose the solution that best suits your project requirements and get your weather app up and running smoothly.

Happy coding!