Access-Control-Allow-Origin (CORS) not enabled in Pimatic API

---

Hello,

I can’t get a connection to the Pimatic API because CORS is not enabled on the page.
I’ve looked through the forum but I could not find anything about this.

I’m using a jQuery AJAX call to retrieve the device information:

            $.ajax(
                {
                    type: "GET",
                    url: this.settings.url,
                    dataType: "json",
                    success: function(data)
                    {
                        resolve(data);
                    },
                    error: function()
                    {
                        reject(new Error("An error occurred while processing the data"));
                    },
                    beforeSend: function(req)
                    {
                        req.setRequestHeader("Authorization", "Basic " + btoa(this.settings.username + ":" + this.settings.password));
                    }.bind(this)
                });

If I change this to JSONP it does load the correct data, but Pimatic does not support this feature so it returns a parsing error.

Enabling CORS would be the best solution in my opinion

Do you guys have any experience with this?

@Tim Generally, I think it should not be a big deal to enable CORS in pimatic as there is express middleware which handles most of it. What I am not sure about is whether or not preflight requests will be required in some cases and whether or not advanced settings such as passing on credentials and setting exposed/allowed headers will be needed. Another related question how we want to setup a CORS policy as part of the configuration.

@mwittig I usually implement it with a few lines into the server config. Not sure about the security concerns though.

    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"
    }

Also, the authentication / preflight request does work because when I change it to JSONP i can retrieve the page with the same code! (but then I get errors in the formatting because pimatic does not support it)

@Tim I have added minimal cors support for testing purposes.

You can install it by upgrading your pimatic from the command as follows

cd /home/pi/pimatic-app/node_modules
sudo npm install pimatic/pimatic#cors --unsafe-perm

Now, you can add something to your settings config as follows:

"cors": {
      "allowedOrigin": "http://10.0.0.12:8080"
    },

@mwittig Awesome! Thanks a lot for adding this .

Never worked with preflight requests before, I now get this error. I guess one more header needs to be added:

XMLHttpRequest cannot load http://localhost:8080/api. Response to preflight request doesn't pass access control check: Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://localhost:3003' is therefore not allowed access.

the Access-Control-Allow-Credentials header is used for as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials

not sure if this will fix it, but it’s worth a try

---- Edit ----

Actually played with your code a bit and got it working

this is the framework.coffee line 242

      if @config.settings.hasOwnProperty('cors') and _.isString(@config.settings.cors.allowedOrigin)
        extraHeaders["Access-Control-Allow-Origin"] = @config.settings.cors.allowedOrigin
        #added this part!
        extraHeaders["Access-Control-Allow-Credentials"] = true
        extraHeaders["Access-Control-Allow-Methods"] = "GET,PUT,POST,DELETE"
        extraHeaders["Access-Control-Allow-Headers"] = "Content-Type, Authorization"
        #end
      @app.use( (req, res, next) =>
        for own key, value of extraHeaders
          res.header(key, value)

        #added this part!
        if ('OPTIONS' == req.method)
          return res.sendStatus(200)
       #end

This will make CORS work. But… It’s not perfect I my plugin suddenly says:

17:26:05.855 [pimatic-quote-of-the-day] Was expecting status code 200 but got 429

So this code still needs some tweaking before adding it to the live env

@Tim Sorry for the delay.

I have released CORS support including your changes with v0.9.30

today i updated pimatic to 0.9.35 and Johnny five to 0.9.4

some peple got this error message:
Invalid config: Missing property “allowedOrigin” in /settings/cors

[Solution 04.11.2016] add/change inside config this:

"cors": {
	"allowedOrigin": "*"
}

What did this mean?

@Knot-Together CORS is a way to communicate between websites. Usually it’s a security issue when website A retrieves information from website B, if you add the CORS parameter and tell it that it’s OK for website A to retrieve information from website B it fixes that.

With CORS enabled you can use a ajax call from the client computer to retrieve some data from Pimatic. Though it’s not enabled for every domain due to security I guess (not sure about this one)?

tldr; cors is a way to communicate between different domains

@Knot-Together said in Access-Control-Allow-Origin (CORS) not enabled in Pimatic API:

What did this mean?

Please do not cross post.

@Tim
thanks for your answer. At the moment i use pimatic only in my privat network. So i think it is okay with “*”. Isn’t it?

"cors": {
	“allowedOrigin”: "*"
}

@mwittig
sorry for my cross postings.

@Knot-Together said in Access-Control-Allow-Origin (CORS) not enabled in Pimatic API:

“cors”: {
“allowedOrigin”: “*”
}

This is a bad coice as it basically allows all cross domain access. I recommend to remove it and just ignore error message “Invalid config: Missing property “allowedOrigin” in /settings/cors” for now as it doesn’t hurt anyway. I’ll provide a fix for it soon.