CORS problem with REST API

Hello.

There is already similar thread, see here. But no conclusion.

I have Shelly EM device, so this example is related to it.

Standard request in browser is working normally: http://ip.address/emeter/0 -> Response is some JSON {"power":0.00,"reactive":0.00,...}.

But when I try to get data from Javscript with this code:

http_request = new XMLHttpRequest();
http_request.open('get', 'http://ip.address/emeter/0', true);
http_request.setRequestHeader('Content-Type', 'application/json');
http_request.send();

I will get error response in current Chrome: Access to XMLHttpRequest at 'http://ip.address/emeter/0' from origin 'http://different.ip.address' 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.

The reason is that Shelly device will respond just with header Content-Type: application/json, but no Access-Control-Allow-Origin: *. In fact, when I am requesting application/json, there is some "preflight request" from browser to device, which also needs response with access control header...

Can this be fixed globally, or at least can be added some option to menu?

Thanks.

Well, this is problem of a one line in code.

In case of text/plain in request... That means Shelly needs to add 'Access-Control-Allow-Origin', '*' to response header, thats all. There is no "preflight request".

In case of data/json in request... There is "preflight request". In Python code, it can looks like this:

class RequestHandler(BaseHTTPRequestHandler): #From http.server
    def do_OPTIONS(self): #This will handle preflight request
        self.send_response(200, "ok")
        self.send_header('Access-Control-Allow-Origin', '*')
        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
        self.end_headers()

    def do_GET(self): #Get request itself
        self.send_header('Content-type', 'application/json')
        self.send_header('Access-Control-Allow-Origin', '*')
        ....

I know, that CORS is pain in the ass, but solution is simple (When You have access to server :-D).

I'm having the exact same issue. Did you get any update from Shelly support on the 'Access-Control-Allow-Origin' header?

jymbob: Did you manage to authenticate using the fetch() command? I'm really strugling with this as well. Everything runs fine as long as I call the API (incl. authentication) through an API client such as Insomnia. But as soon as I call the API through my React app, either with fetch, axios ..., authentication does not work anymore and I get the CORS issues (I can "understand" the CORS issue as the React app is running in the browser).