Querying Data with Javascript (influx-client-js) for influx 1.8

Welcome & Getting Started
, ,
1

Hello everyone,

I am just getting started with InfluxDB so I expect this issue to be sort of simple. I could not find a solution to my specific problem though.

I think the problem is that I use influx v. 1.8. and the documentation for connecting with a javascript client is a bit scarce.

I want to make a simple query to my DB from my Vue Project. The DB is running on localhost:8086.

According to this example : influxdb-client-js/examples/influxdb-1.8.ts at master · influxdata/influxdb-client-js · GitHub
i came up with the following code:

     const database = 'timeseries'
		const retentionPolicy = 'autogen'

		const bucket = `${database}/${retentionPolicy}`


		const influxDB = new InfluxDB("http://localhost:8086")
		const queryAPI = influxDB.getQueryApi('')
		debugger;
		const query = `from(bucket: "${bucket}") |> range(start: -1h)`
		queryAPI.queryRaw(query)
		 .then(result => {
			 console.log(result)
			 console.log('\nQueryRaw SUCCESS')
		   })
		   .catch(error => {
			 console.error(error)
			 console.log('\nQueryRaw ERROR')
		   })

I use queryraw just for testing purposes. My Org is just an empty string.

Now I really do not know what to do next.

Inside the Error-Catch-Block i get the following:

TypeError: Failed to fetch

My Headers look like this (status : CORS error)

1. Request URL:

http://localhost:8086/api/v2/query?org=

  2. Referrer Policy:

strict-origin-when-cross-origin

1. Request Headers

  1. Provisional headers are shown

  2. accept:

text/csv

  3. content-type:

application/json; encoding=utf-8

  4. Referer:

http://localhost:8081/

  5. sec-ch-ua:

" Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"

  6. sec-ch-ua-mobile:

?0

  7. User-Agent:

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

2. Query String Parametersview sourceview decoded

  1. org:

3. Request Payloadview source

  1. {query: "from(bucket: "timeseries") |> range(start: -1h)",…}

    1. dialect: {header: true, delimiter: ",", quoteChar: """, commentPrefix: "#",…}
    2. query: "from(bucket: \"timeseries\") |> range(start: -1h)"
    3. type: "flux"

I dont know if its my cors settings thats causing the problem or if I am just querying wrong (should my org really be empty? Is my “retention policy” correct? It is neccessary?

I hope you guys can help me out here.
Thanks a lot in advance!

Chris

2

i forgot the preflight headers:


1. Request URL:

http://localhost:8086/api/v2/query?org=

  2. Request Method:

OPTIONS

  3. Status Code:

405 Method Not Allowed

  4. Remote Address:

[::1]:8086

  5. Referrer Policy:

strict-origin-when-cross-origin

1. Response HeadersView source

  1. Allow:

POST

  2. Content-Length:

19

  3. Content-Type:

text/plain; charset=utf-8

  4. Date:

Tue, 08 Jun 2021 09:36:30 GMT

  5. X-Content-Type-Options:

nosniff

  6. X-Influxdb-Build:

OSS

  7. X-Influxdb-Version:

1.8.0

2. Request HeadersView source

  1. Accept:

3./*

  2. Accept-Encoding:

gzip, deflate, br

  3. Accept-Language:

de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7

  4. Access-Control-Request-Headers:

content-type

  5. Access-Control-Request-Method:

POST

  6. Connection:

keep-alive

  7. Host:

localhost:8086

  8. Origin:

http://localhost:8081

  9. Referer:

http://localhost:8081/

  10. Sec-Fetch-Dest:

empty

  11. Sec-Fetch-Mode:

cors

  12. Sec-Fetch-Site:

same-site

  13. User-Agent:

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

4. Query String Parametersview sourceview URL-encoded

  1. org:

I also added the following to my vue-config-js:


headers: {
    "Access-Control-Allow-Origin": "*",
	}

so in theory it should not be a CORS permission problem, or?