Unable to use InfluxDB 1.8 directly from the browser

[cailloumajor]

Background

I am developing a web application based on Vue.js (client-side) that needs to query InfluxDB 1.8 at regular interval, using Flux. The application reaches InfluxDB directly by http://host:port. I first tried to use this library (version 1.4.0-nightly.14) as in examples/influxdb-1.8.ts, but I couldn't make it work due to CORS preflight not acknowledged by InfluxDB (v1.8.0).
I then decided to use @influxdata/influxdb-client-apis (version 1.3.0) to do the query (using QueryAPI.postQuery), with the code below:

(note the usage of { mode: "no-cors" } as postQuery's request options, intended for fetch call, and which raises a typing error)

import { flux, InfluxDB } from "@influxdata/influxdb-client"
import { QueryAPI } from "@influxdata/influxdb-client-apis"
import { Plugin } from "vuex"

import { automation } from "../modules/automation"

export default function createVuexPlugin(
  url: string,
  DBName: string
  // eslint-disable-next-line
): Plugin<any> {
  return store => {
    const ctx = automation.context(store)
    const influxDB = new InfluxDB({ url })
    const queryAPI = new QueryAPI(influxDB)
    const bucket = `${DBName}/autogen`
    const query = flux`\
      from(bucket: "${bucket}")
        |> range(start: -1d)
        |> increase()
        |> yield()`.toString()

    function influxQuery() {
      queryAPI
        .postQuery(
          { body: { query } },
          // eslint-disable-next-line
          // @ts-ignore
          { mode: "no-cors" }
        )
        .then((value: string) => console.log(value))
    }

    window.setInterval(influxQuery, 10000)
  }
}

The query now fulfills, but I receive an disappointing undefined string as the result of the succeeding Promise ! (see below the console of Firefox Developer Edition)

The response from InfluxDB seems to be conform:

Description of the problem

For a reason I don't understand, commit d106c08 made Content-Type header name all-lowercase (and I fear other cases like this were introduced later, eg. accept-encoding 1c9ba45), IMHO preventing them to being correctly interpreted by browsers and InfluxDB (see below, showing that Content-Type: application/json is not sent to InfluxDB, despite the intention in QueryAPI.postQuery).

For the case described in this issue, this makes responseContentType below always equal to empty string, making the whole function return undefined.

influxdb-client-js/packages/core/src/impl/browser/FetchTransport.ts

Lines 110 to 135 in 3fd9068

	async request(path: string, body: any, options: SendOptions): Promise<any> {
	const response = await this.fetch(path, body, options)
	const {status, headers} = response
	const responseContentType = headers.get('content-type') || ''
	let data = undefined
	try {
	if (responseContentType.includes('json')) {
	data = await response.json()
	} else if (responseContentType.includes('text')) {
	data = await response.text()
	}
	} catch (_e) {
	// ignore
	Logger.warn('Unable to read error body', _e)
	}
	if (status >= 300) {
	throw new HttpError(
	status,
	response.statusText,
	data,
	response.headers.get('retry-after')
	)
	}
	return data
	}

Additional thoughts

This issue makes me being in trouble, because it prevents the whole library from being usable in my use case, this one not being an edge case IMHO.
Does anyone have an idea about the CORS preflight problem described at the beginning ?

• Is it also due to this issue ?
• Is InfluxDB 1.x missing correct handling of CORS (as fix(CORS): stop processing in pre-flight CORS requests influxdb#17640 seems to be fixing for InfluxDB v2) ?

[sranka]

@cailloumajor the browser example works fine when used against a proxy and it does not when using CORS. The v1 server code does not handle CORS as v2 does, so it is blocked by the client. I am on the way to find a workaround.

[sranka]

I found out that CORS is not supported in "v2 compatibility endpoints" of InfluxDB v1, this is now reported in influxdata/influxdb#18391 .

Using a proxy that would satisfy CORS requirements or running a browser to ignore CORS requirements is a workaround. I am now looking deeper at your workaround @cailloumajor

[sranka]

Regarding your workaround @cailloumajor . The "no-cors" mode allows only limited settings of content-type, "application/json" is not allowed ... that's why your FF sends text/plain. Additionally, in the 'no-cors' mode, fetch returns an opaque response so the code cannot see response headers and even body.

[cailloumajor]

@sranka thank you for those informations, and sorry for wrongly focusing on headers names case.

I am going to try using a proxy in my project, it was planned for production but it seems I need it in development too...

[sranka]

You are welcome @cailloumajor , The actual issue is influxdata/influxdb#18391.

[jitendracodehacker]

@sranka : i am also facing the CORS issue when i use the example code in my browser.

// https://v2.docs.influxdata.com/v2.0/reference/syntax/annotated-csv/

queryApi.queryRows(fluxQuery, {
  next(row: string[], tableMeta: FluxTableMetaData) {
    const o = tableMeta.toObject(row)
    // console.log(JSON.stringify(o, null, 2))
    console.log(
      `${o._time} ${o._measurement} in '${o.location}' (${o.example}): ${o._field}=${o._value}`
    )
  },
  error(error: Error) {
    console.error(error)
    console.log('\nFinished ERROR')
  },
  complete() {
    console.log('\nFinished SUCCESS')
  },
})

[sranka]

Thank you @jitendracodehacker for letting us know, it depends on whether your InfluxDB contains a fix for influxdata/influxdb#18391 , AFAIK there is no public 1.8 release with this fix yet. The client example uses a proxy to workaround 1.8 CORS issues.

[jitendracodehacker]

Thank you .. but still i am facing the issue. here is the output of my node proxy server

could you check this .

my setup is :
i have running angular application on my machine and influx db is deployed to AWS EC2 instance.

[sranka]

It should be fine if your angular app is served from the same server where the proxy is running, no CORS is then used. You can also add cors to the proxy server, so that the proxy can be accessed from any origin.