Getting CORS error with Vue3 and influxdb2

Question

I get a CORS-error when accessing my influxdb2 from a Vue frontend. The frontend is running local in development mode, the influxdb runs on a server in the network.

I used apache as a reverseproxy but don't get it to work.

    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Headers "append,delete,entries,foreach,ge>

    ProxyPreserveHost on
    ProxyRequests on
    ProxyPass / http://192.168.1.60:8086/ Keepalive=On
    ProxyPassReverse / http://192.168.1.60:8086/

Have you any ideas? And here is my js code:

axios
.post("https://influx.domain/query",{ headers: {
  'Authorization': `Token ${token}`,
  'Content-Type': 'application/vnd.flux',
  },
  data: query
})
.then(response => {
  console.log(response.data)
})
.catch(error => {
  console.log(error)
});

Header set Access-Control-Allow-Origin "http://localhost:8080" does also not work — praetorianer777, Jan 01 '22 at 22:06
Your screenshot shows that the `Authorization` header is not currently allowed, even though you sent it with `fetch`; that's probably why CORS preflight check fails. Try `Header set Access-Control-Allow-Headers: "Content-Type, Authorization"` instead. — jub0bs, Jan 02 '22 at 08:46
I tried your suggestion, but it didn't work,... any other ideas? I also tried to not use localhost but my normal IP and port — praetorianer777, Jan 02 '22 at 11:04
Edit your question and add the CORS error message show in your browser's Console tab. That will help us diagnose the issue. — jub0bs, Jan 02 '22 at 11:14

score -1 · Answer 1 · answered Jan 02 '22 at 11:47

I got it to work, I had to add always to the Apache config, see below:

    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"
    Header always set Access-Control-Allow-Headers "Authorization, Content-Type"

Getting CORS error with Vue3 and influxdb2

1 Answers1