I’ve been attempting to access the endpoint but constantly run into this.

‘https://graphical.weather.gov/xml/sample_products/browser_interface/ndfdBrowserClientByDay.php?’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Even when watching the request get sent on the network tab with the Access-Control-Allow-Origin header, it still gets rejected. It rejects ‘*’ and ‘localhost:8080’.

Axios call

const headers = {
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET',
    'Access-Control-Allow-Headers': 'Content-Type',
  },
};
const baseURL =
  'https://graphical.weather.gov/xml/sample_products/browser_interface/ndfdBrowserClientByDay.php?';

const params = {
  params: {
    lat: payload.coords.latitude.toFixed(2), // payload from browser geolocation
    lon: payload.coords.longitude.toFixed(2), // payload from browser geolocation
    startDate: currentday, // momentjs
    numDays: 1,
    format: '24 hourly',
    Unit: 'e',
  },
};
axios
  .get(baseURL, params, {
    ...headers,
  })
  .then(response => {
    console.log('weather response', response);

Also, I don’t want to use a proxy such as CORS-Anywhere and I’d rather understand the underlying issue.

Source: Ask Javascript Questions