CORS policy

[bicolorbore586]

Hi all,

Upon loading my magicmirror today, I’ve been met with an issue in relation to the default weather module, starting in dev mode has shown me the error

access to xmlhttprequest at from origin has been blocked by cors policy the access control allow origin header contains multiple values ‘*, *’ but only one is allowed

after googling, and seeing the results, it’s way above my (non-existent) technical know-how.

Is anyone able to shed any light (in lay man’s terms)?

Thanks,

[sdetweil]

@bicolorbore586 use the develop branch. they have just reworked all the weather providers to handle this.
see
https://forum.magicmirror.builders/topic/14327/testing-new-fixes-or-solving-current-problems-with-next-release-code

[bicolorbore586]

@sdetweil
I’ve tried to do that, now get pretty much the same result, but with a slightly different bit at the end.

Access to fetch at ‘https://api.weatherbit.io/v2.0/forecast/daily?lat=xxx&lon=-xxx&units=M&key=a…’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, *’, but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
api.weatherbit.io/v2…:1
Failed to load resource: net::ERR_FAILED
weatherbit.js:66 Could not load data … TypeError: Failed to fetch
at Class.fetchData (weatherprovider.js:136:27)
at Class.fetchWeatherForecast (weatherbit.js:53:8)
at weather.js:184:27
weather.js:150 New weather information available.
localhost/:1 Refused to apply style from ‘http://localhost:8080/css/custom.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

[sdetweil]

@bicolorbore586 did u git pull, npm install after switch

[bicolorbore586]

@sdetweil yes, followed your instructions to the letter

[sdetweil]

@bicolorbore586 custom.css is because it doesn’t exist by default. if u used my install script I create it for you

touch ~/MagicMirror/css/custom.css

[bicolorbore586]

@sdetweil I used the MagicMirror installation instructions (assuming manual install) to install the software.

Have just tried your git fetch origin
But get fatal: Refusing to fetch into current branch refs/heads/develop of none-bare repository.

(Sorry, you’re probably shaking your head, but I am a complete noob at all this)

[sdetweil]

@bicolorbore586 there were two choices

manual install

git checkout develop
git pull
npm install

or the other

[karsten13]

@sdetweil

I think the cors proxy is not new in the weather module (but in newsfeed) so last release should work.

The cors proxy was not enabled for all weather providers, only for envcanada and darksky, so it must be enabled in the config for weatherbit by adding useCorsProxy: true, to the weather config.

[sdetweil]

@karsten13 ah, I thought we went proxy everywhere

[karsten13]

@sdetweil

had to look in the code again … but may we should set default true for all providers …

[sdetweil]

@karsten13 getting that way

localhost is usually allowed 0.0.0.0 ( I consider to be a bug to send this anywhere) is not

[bicolorbore586]

@sdetweil @karsten13 have added in the useCorsProxy: true

Have since updated MagicMirror, now getting

Could not load data … TypeError: Cannot read properties of undefined (reading ‘0’)

which when clicked on shows weatherbit.js

code_text
```/* global WeatherProvider, WeatherObject */

/* MagicMirror²
 * Module: Weather
 * Provider: Weatherbit
 *
 * By Andrew Pometti
 * MIT Licensed
 *
 * This class is a provider for Weatherbit, based on Nicholas Hubbard's class
 * for Dark Sky & Vince Peri's class for Weather.gov.
 */
WeatherProvider.register("weatherbit", {
	// Set the name of the provider.
	// Not strictly required, but helps for debugging.
	providerName: "Weatherbit",

	// Set the default config properties that is specific to this provider
	defaults: {
		apiBase: "https://api.weatherbit.io/v2.0",
		apiKey: "",
		lat: 0,
		lon: 0
	},

	fetchedLocation: function () {
		return this.fetchedLocationName || "";
	},

	fetchCurrentWeather() {
		this.fetchData(this.getUrl())
			.then((data) => {
				if (!data || !data.data[0] || typeof data.data[0].temp === "undefined") {
					// No usable data?
					return;```

Forgive me, again for being a noob, but I didn’t think this required any information in, however having substituted the lat and lon zero’s for my location, still throws up the same and error and points me to the [0] following !data.data

[sdetweil]

@bicolorbore586 never edit our code, all config goes in config.js

u need lat and long (how else does it know where u are)

all numbers and true/false have no quotes
anything with a letter or special character does need quotes

u need weatherProvider
apikey
lat
lon
and type (forecast or current)
and

useCorsProxy: true

[bicolorbore586]

@sdetweil
ok, have put it back to how it was… that was final “can I get this to work, before I ask for further help”
this is my config.js

code_text
``` {
			module: "weather",
			position: "top_right",
			config: {
				weatherProvider: "weatherbit",
				type: "current",
				lat: 5,
				lon: -1,
				apiKey: "ab4",
				useCorsProxy: true
					}
		},
		{
			module: "weather",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				weatherProvider: "weatherbit",
				type: "forecast",
				lat: 5,
				lon: -1,
				initialLoadDelay: 1,
				apiKey: "ab4",
				useCorsProxy: true
					}
		},

[sdetweil]

@bicolorbore586 ok, lousy provider error reporting…

i want you to edit the provider weatherbit.js and

using your config (with the bad apikey) I get the ‘0’ error too

change this (starting on line 38)

					if (!data || !data.data[0] || typeof data.data[0].temp === "undefined") {
						// No usable data?
						return;
					}

					const currentWeather = this.generateWeatherDayFromCurrentWeather(data);
					this.setCurrentWeather(currentWeather);

to this

				if(!data || (data && data.error)){
					Log.error("Could not load data ... ", data?data.error: "no data returned");
				}
				else {
					if (!data || !data.data[0] || typeof data.data[0].temp === "undefined") {
						// No usable data?
						return;
					}

					const currentWeather = this.generateWeatherDayFromCurrentWeather(data);
					this.setCurrentWeather(currentWeather);
				}

then save and
restart mm, open the developers window
ctrl-shift-i
select the console tab
and enter weath
in the filter field

there should be a red line of text , with the weatherbit.js name to the right

[bicolorbore586]

@sdetweil
so I commented out the original text and added in the new:

code_text
``` fetchCurrentWeather() {
		this.fetchData(this.getUrl())
			.then((data) => {
				/*if (!data || !data.data[0] || typeof data.data[0].temp === "undefined") {
					// No usable data?
					return;
				}

				const currentWeather = this.generateWeatherDayFromCurrentWeather(data);
				this.setCurrentWeather(currentWeather);*/
				if(!data || (data && data.error)){
					Log.error("Could not load data ... ", data?data.error: "no data returned");
				}
				else {
					if (!data || !data.data[0] || typeof data.data[0].temp === "undefined") {
						// No usable data?
						return;
					}

					const currentWeather = this.generateWeatherDayFromCurrentWeather(data);
					this.setCurrentWeather(currentWeather);
				}
			})
			.catch(function (request) {
				Log.error("Could not load data ... ", request);
			})
			.finally(() => this.updateAvailable());

[bicolorbore586]

@bicolorbore586 from the line Could not load data … TypeError: Cannot read properties of undefined (reading ‘0’) at weatherbit.is

[sdetweil]

@bicolorbore586 can u email me your apikey

same userid as on this post
at gmail

or send me a direct message

the returned data is not coming back in the expected format

[sdetweil]

@bicolorbore586 thanks for the key

the error is

Your request count (159) is over the allowed limit of 50 per day - Upgrade your key, or retry after 670.2 minutes

and u have 2 modules configured, so each will fetch separately, so u have to change the update cycle to once/hour
in both modules, (default 10 mins)

updateInterval: 60 * 60 * 1000

and every MM restart sends 2 requests, 1 for each module

change the new code to look like this…

				if(!data || (data && data.error) || data.status_message){
					Log.error("Could not load data ... ", data?(data.error|| data.status_message): "no data returned");
				}
				else {
					if (!data || !data.data[0] || typeof data.data[0].temp === "undefined") {
						// No usable data?
						return;
					}

					const currentWeather = this.generateWeatherDayFromCurrentWeather(data);
					this.setCurrentWeather(currentWeather);
				}

crappy api implementation… should set error for all errors, not
put error info in good data returns