@influxdata/influxdb-client-browser Cross-Origin Request Blocked error

[RobRover]

Hello, without modifying my react component it suddenly stopped working.

This is my code for the query

const queryApi = new InfluxDB({ url, token }).getQueryApi(props.org);
    //make query
    queryApi.queryRows(query, {
      next(row, tableMeta) {
        var o = tableMeta.toObject(row);
        influxOutput.push(o);
      },
      complete() {
        setRowData(influxOutput);
      },
    });
  }, [props.url, props.token, props.org, query]);

Error:

Uncaught (in promise) TypeError: t.error is not a function
    error linesToTables.ts:26
    error chunksToLines.ts:65
    error completeCommunicationObserver.ts:20
    node_modules bundle.js:1733
    promise callback*send FetchTransport.ts:137
    node_modules bundle.js:1885
    consumeRows AnnotatedCSVResponseImpl.ts:60
    queryRows QueryApiImpl.ts:62
    App App.js:23
    React 6
    unstable_runWithPriority scheduler.development.js:653
    React 3
    workLoop scheduler.development.js:597
    flushWork scheduler.development.js:552
    performWorkUntilDeadline scheduler.development.js:164
    js scheduler.development.js:187
    js scheduler.development.js:857
    Webpack 21

Do you know what might happend? Thanks

[RobRover]

In more detail the error is: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://180.00.0.0:8086/api/v2/query?org=org. (Reason: CORS request did not succeed).

Might be because the server where influxdb is loacted is overload?

[Pavel Závora]

Thank you @RobRover for using the client and posting an issue. The originally posted error

Uncaught (in promise) TypeError: t.error is not a function

is caused by your code that does not define the error handler in the second parameter of queryApi.queryRows.

Cross-Origin Request Blocked means that the browser is blocking the request to a non-origin URL because of a failed pre-flight CORS request. Older versions on InfluxDB OSS supported CORS properly, the newer ones probably do not. Can you please better describe your deployment including the InfluxDB version that you use?

[Pavel Závora]

I tried InfluxDB v2.2.0 and CORS works fine against /api/v2/query endpoint. I was using a browser example with a modified env_browser.js, url was changed to http://INFLUXDB_HOST:8086 .

[RobRover]

Hi I'm using docker. Influxdb 2.2. Here is my dockerfile:

version: '3.6'
services:
  influxdb:
    image: influxdb:2.2
    container_name: influxdb
    restart: always
    ports:
      - '8086:8086'
    volumes:
      - influxdb_data:/var/lib/influxdb

  grafana:
    image: grafana/grafana
    container_name: grafana-server
    restart: always
    depends_on:
      - influxdb
    links:
      - influxdb
    ports:
      - '3000:3000'
    volumes:
      - grafana_data:/var/lib/grafana

  telegraf:
    image: telegraf
    container_name: telegraf
    restart: always
    volumes:
    - ./telegraf.conf:/etc/telegraf/telegraf.conf:ro
    - ./logs:/influxDbLogs
    ports:
    - '8125:8125'

volumes:
  grafana_data: {}
  influxdb_data: {}

As an observation If I use Firefox in private works correctly. I'm still researching for a solution

[RobRover]

Okay, It was due I was using a VPN. If somebody has this problem in the future might implement a solution using a reverse proxy such like this: https://maximillianxavier.medium.com/solving-cors-problem-on-local-development-with-docker-4d4a25cd8cfe