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:

    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.

  • You can specify a no-cors request if you use the fetch API rather than the XMLHttpRequest object:


    Code
    fetch('http://ip.address/emeter/0', {mode: 'no-cors'}).then(resp => {
      console.log(resp)
    })

    Edit:

    Of course, looking into it, while that allows the response to happen, you get an "opaque" response so still can't access the JSON packet in javascript.


    Agreed that adding some headers might fix this, but my understanding from another support request is that space on these devices is tight

    Edited once, last by jymbob: Fuller reply ().

  • 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:

    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).

  • Hello. Last response from Shelly Support Team is from 4.6.2020.

    "No, there is no update. They are working on new devices at the moment. All the capacity is taken."

  • This is very unfortunate. I have 30+ Shelly devices, until now I controlled them by a .net application, which worked fine. I need to switch to a small web based solution now, so I need this function very desperatly.


    It is a very small change on server side, on client side it needs workarounds that make Shelly devices useless in this configuration.

  • Hi all

    Any news about this topic?

    Cordova framework suffers the same security problem using webview objects.

    I do not want to develop a native application for each platform I need to provide the functionality...

    Thx :rolleyes:

  • Hi, Reading all comments above I‘d like to point out one rule:


    If RestAPI works when used as described by manufacturer, don‘t blame the product, look at your own application. 99% the problem is located in front of the screen...

    Mit der Elektrik ist das doch ganz einfach. Alles, was man sich merken muss: Rot ist Schwarz und Plus ist Minus, dann klappt‘s immer:!: Und beim Programmieren hat man auch nur Nullen und Einsen, also wie kompliziert kann das schon sein:?:

  • How can I access the JSON from my webpage. Doing this from JS is impossible at the moment. Doing this from backend is impossible since the Shelly device doesn't have internet. I want to set the wifi from within my app.

    Any update on this? Is this configurable somewhere to allow it?

  • CORS is configurable since Firmware 1.10.


    Webinterface http://shelly-ip Internet & Security - Advanced Developer Settings..


    pasted-from-clipboard.png

    10x Shelly1, 7x Shelly 1PM, 2xShelly 1L, 9x Shelly 2.5, 3x Shelly2, 1x Shelly EM, 2x ShellyDimmer, 3x ShellyDimmer2, 1x Shelly 3EM, 1x Shelly4Pro, 1x Shelly Button1, 4x Shelly Duo, 1x, ShellyDuo G10, 3x ShellyVintage, 1x Shelly Bulb, 8x ShellyDuoG10RGB, 1x ShellyPlug, 2x ShellyRGBW2, 5x Shelly PlugS. 1x Shelly Sense, 3x Shelly i3, 1x Shelly Gas, 4x Shelly H&T, 1x Shelly Flood, 2x ShellyDoor&Window2, 3x TempAddon, 1x ShellyMotion