Accessing rqlite HTTP via jQuery, got CORS error

[brailateo]

Access to XMLHttpRequest at 'http://10.0.0.1:4001/db/execute?timings' from origin 'http://localhost' 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.

It would be nice to be able to access the HTTP API via jQuery directly, from JavaScript in a browser, avoiding any other nodejs or php servlets. I was looking for some command-line parameters that would fix that but did not find any!

Teo

[otoolep]

I am not super-knowlegeable in this area (though I know what CORS is about). What is the recommended way to fix this?

[brailateo]

I think that it would be simpler to use: https://github.com/rs/cors

Some examples are here: https://flaviocopes.com/golang-enable-cors/

Teo

[LeslieJohnson]

I'm able to get data via fetch from node using the node-fetch package. Since fetch is supported in browsers, this should work without the import. Note the parameters for fetch and protocol in in the query.

import fetch from "node-fetch"
const query = `
http://localhost:4001/db/query?pretty&q=select sn.store_name,sl.name from shopping_list sl left join store_names sn on sl.store_name_id = sn.store_name_id where sl.name is not null;
`
async function getQuery() {
  const response = await fetch(query, {
    mode: 'no-cors',
    method: 'get',
    url: `http://localhost:4001`
  })
  const data = await response.json()
  return data
}
getQuery().then(data => {
  console.log(data.results[0].values)
})

[patdx]

I don't think that code will work in the browser, while mode: 'no-cors', is no-op in node-fetch, in the actual browser it prevents the Javascript code from reading response.json() so you can't do anything with the response.

Ultimately CORS is a security mechanism implemented by browsers, so there is not some easy loophole to circumvent it in the browser. The solution needs to come from the server side.

That said, I'm not sure exactly what the correct solution should look like.

I've just run into this issue as I want to debug some responses using browser dev tools locally, but not currently planning to expose an rqlite to the public internet and consume the response from browser application, so don't really need so many fancy settings, but would appreciate a quick way to let me connect to rqlite HTTP API from a local browser.

[mikroskeem]

rqlite simply needs to pass on CORS headers with its responses. I'm personally using rqlite for toy frontend applications & small workshops, being able to throw Caddy out from the deployment would make rqlite usage a lot more convenient.

That being said, are there any plans to implement CORS headers support?

[otoolep]

Would it be sufficient to simply add a command-line option to rqlited, allowing you to specify the value to be set for the Access-Control-Allow-Origin HTTP header?

E.g. you would pass, say, this when launching rqlited: -http-allow-origin="https://developer.mozilla.org" and then all HTTP responses would include the following HTTP header in the response:

Access-Control-Allow-Origin: https://developer.mozilla.org

[otoolep]

In action:

rqlited -http-allow-origin=https://rqlite.io data

Then we get this:

$ curl -v localhost:4001/status
*   Trying ::1:4001...
* TCP_NODELAY set
* connect to ::1 port 4001 failed: Connection refused
*   Trying 127.0.0.1:4001...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 4001 (#0)
> GET /status HTTP/1.1
> Host: localhost:4001
> User-Agent: curl/7.68.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: https://rqlite.io
< Content-Type: application/json; charset=utf-8
< X-Rqlite-Version: 7
< Date: Sun, 26 Feb 2023 16:26:49 GMT
< Transfer-Encoding: chunked

This seems like it would address simple use cases, agreed?