I have the frontend of a web-app running on localhost:8080, and a docker container running an influxDB on localhost:8086. I have npm-installed influxdb-client-js (https://github.com/influxdata/influxdb-client-js) and created a file called db.ts containing this code (https://github.com/influxdata/influxdb-client-js/blob/master/examples/influxdb-1.8.ts) with my credentials.
Right now I just want to test if I can query the database at all, form the frontend. When I import db.ts into a vue-component to see if any data will appear in the browser-console, Cors policy is blocking the request:
Access to fetch at 'http://localhost:8086/api/v2/query?org=' from origin 'http://localhost:8080' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I tried to create a vue.config.js-file, and proxying like this:
// vue.config.js
/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
module.exports = {
// options...
devServer: {
proxy: 'http://localhost:8086',
}
}
This didn't solve the problem. So, how would I enable Cors on the "server side" here?
Use some (your favorite) reverse proxy in front of InfluxDB and add desired CORS headers there. Example for nginx: https://enable-cors.org/server_nginx.html
I guess you will have credentials/authorization in the InfluxDB call, so don't use Access-Control-Allow-Origin: * in your setup, because https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
In requests with credentials, it is treated as the literal header name "*" without special semantics. Note that the Authorization header can't be wildcarded and always needs to be listed explicitly.