title: Axios hitting No 'Access-Control-Allow-Origin' header is present on the requested resource error
body: <blockquote>
    <p><a href="https://samples.openweathermap.org/data/2.5/forecast?appid=be2e163d03a0b97a96a89b0230be8e4a&amp;q=klang,my" rel="nofollow noreferrer">https://samples.openweathermap.org/data/2.5/forecast?appid=be2e163d03a0b97a96a89b0230be8e4a&amp;q=klang,my</a></p>
  </blockquote>
  
  <p>When I directly paste the URL into the browser, I can make the API request successfully. However, when I try it with <code>Axios</code> I'm hitting below exception</p>
  
  <blockquote>
    <p>No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a>' is therefore not allowed access.</p>
  </blockquote>
  
  <p>Based on some research, 
  I can't understand the logic behind as I'm following the exact same steps provided by online course, by simply firing this API call using Axios should be able to return the result.</p>
  
  <pre><code>import axios from 'axios';
  
  const API_KEY = 'be2e163d03a0b97a96a89b0230be8e4a';
  const ROOT_URL = `https://samples.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`
  export const FETCH_WEATHER = 'FETCH_WEATHER';
  
  export function fetchWeather(city) {
    const url = `${ROOT_URL}&amp;q=${city},my`;
    const request = axios.get(url);
  
    return {
      type: FETCH_WEATHER,
      payload: request
    }
  }
  </code></pre>