JavaScript influxdb-client react web app CORS issue

[Fredo]

Hello.
I am brand new with influxdb. I wanted to write here first before opening an issue in github. Because I think the problem should be with me.
I want to develop a small web app (with React) and looked here first: Getting Started with JavaScript and InfluxDB 2.0

First I thought I’d just start with something simple and query the health (as described in “getting started”. I develop on one machine and my influxdb is on another server. I get a CORS error.

Access to fetch at 'http://192.168.1.148:8086/health' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request does not 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 have already looked on github. I really can’t figure it out.
This should just work, shouldn’t it?

Many thanks for help. Regards.

[Franky1]

I assume you know what CORS is?
CORS errors are a common problem when developing frontend applications locally together with APIs.

I guess one of the two possibilities could solve your problem:

1.) Instead of opening the index.html on localhost directly in the browser, also start a simple web server on localhost. For example:

python -m SimpleHTTPServer

Or if you use Visual Studio Code, install the plugin Live Server, start it and open your web app on localhost.

OR

2.) Allow CORS on the server running InfluxDB

[Fredo]

Hi Franky.
Many thanks.
I was able to solve this problem with the help of the following post on github:

CORS fail with query v2 compatibility API

In summary use nginx to allow CORS. Well, not so easy for me… but it worked.