Why after I add an edge causes the web problem like CORS, the error message is the following text

1

Why after I add an edge causes the web problem like CORS, the error message is the following text :[Info] Websocket connecting to URL [ws://az-ems.pplc.co:8082] (main.js, line 30081)
[Warning] [blocked] The page at https://az-ems.pplc.co/index was not allowed to run insecure content from ws://az-ems.pplc.co:8082/. (main.js, line 114459)

2

Hi and welcome to the community,

CORS is a restriction to load data from another URL.

If you run a public facing OpenEMS Backend + UI setup, it is always recommended to use a proxy server in front, like NGINX, that serves as a proxy for the individual endpoints. See the architectural diagram:

https://openems.github.io/openems.io/openems/latest/introduction.html#_system_architecture

This is an example NGINX configuration:

server {
	server_name openems.example.com;
	listen 443 ssl default;
	root /var/www;

	[...]
	
	# Proxy for OpenEMS Edge -> OpenEMS Backend
	location ^~ /openems-backend {
			limit_req zone=limitreqsbyaddr;
			proxy_pass http://127.0.0.1:8091;
			proxy_http_version 1.1;
			proxy_set_header Host $host;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			keepalive_timeout 120s;
			proxy_connect_timeout 120s;
			proxy_read_timeout 300s;
			proxy_send_timeout 300s;

			access_log /var/log/nginx/openems-edge.access.log;
			error_log /var/log/nginx/openems-edge.error.log;
	}
	
	# Proxy for OpenEMS UI -> OpenEMS Backend
	location /openems-ui {
			proxy_pass http://127.0.0.1:8092;
			proxy_ssl_server_name on;
			proxy_http_version 1.1;
			proxy_set_header Host $host;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			keepalive_timeout 6000s;
			proxy_connect_timeout 6000s;
			proxy_read_timeout 6000s;
			proxy_send_timeout 6000s;

			access_log /var/log/nginx/openems-ui.access.log;
			error_log /var/log/nginx/openems-ui.error.log;
   }

	# Location for OpenEMS UI
	location / {
			alias /var/www/openems-ui;
			index index.html;
			try_files $uri$args /m/index.html;

			access_log /var/log/nginx/openems-ui.access.log;
			error_log /var/log/nginx/openems-ui.error.log;
	}
}

Make sure to adjust your UI environment file accordingly to use the correct URL endpoint. Example:

import { Environment } from "src/environments";
import { theme } from "./theme";

export const environment: Environment = {
    ...theme, ...{

        backend: 'OpenEMS Backend',
        url: "wss://openems.example.com/openems-ui",

        production: true,
        debugMode: false
    }
};

And in your OpenEMS Edge instance, configure the Controller Api Backend URI configuration parameter to wss://openems.example.com/openems-edge

Regards,
Stefan

1 Like
3

Thank you, Stefan, I follow your advice by changing the [UI environment file] and solved my problem.

1 Like