[Bug] DBQnA: blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

[hualongfeng]

Priority

P2-High

OS type

Ubuntu

Hardware type

Xeon-SPR

Installation method

• Pull docker images from hub.docker.com
• Build docker images from source
• Other
• N/A

Deploy method

• Docker
• Docker Compose
• Kubernetes Helm Charts
• Kubernetes GMC
• Other
• N/A

Running nodes

Single Node

What's the version?

version: v1.3 opea/text2sql-react-ui rebuild based on main branch

Description

I run DBQna in a vagrant virtual machine. The UI needs to export port 5174 to host. Postgress, as a database, also needs to export port 5442 to host. These two ports are reasonable, but I didn't expect that port 9090 of text2sql-service also needs to be exported. We obviously use nginx in the UI service, so why can't we hide the text2sql UI in the backend like Chatqna? Using it directly on the frontend makes me unable to use DBQna normally.

Reproduce steps

Running all service in a virtual machine and export port to host, then access the UI in another machine.

Please don't run web, dbqna service on same machine. Thanks

Raw log

Attachments

No response

[joshuayao]

Hi @hualongfeng Thanks for reporting the issue.

DBQnA does not support CORS by default for Docker Compose deployment. For distributed setups, we recommend using Kubernetes (K8s) instead of Docker Compose.

If you have to use Docker Compose for distributed setup, we recommend using Nginx reverse proxy to hide the frontend and backend under a single origin, similar to the ChatQnA default setup.

Please update your Docker Compose files. You can find a reference in the chatqna-xeon-nginx-server configuration within the following file: https://github.com/opea-project/GenAIExamples/blob/main/ChatQnA/docker_compose/intel/cpu/xeon/compose.yaml.

This behavior would not be a bug; OPEA has the Nginx "gateway", and it is configurable, and depends on user setup.

[hualongfeng]

Hi @joshuayao

Do you have the nginx configurable example about DBQna. I know DBQna react ui have nginx, but I don't know how to configure it.
There are large different between Chatqna and DBQna.

Could you give me a example like Chatqna?:

  chatqna-xeon-nginx-server:
    image: ${REGISTRY:-opea}/nginx:${TAG:-latest}
    container_name: chatqna-xeon-nginx-server
    depends_on:
      - chatqna-xeon-backend-server
      - chatqna-xeon-ui-server
    ports:
      - "${NGINX_PORT:-80}:80"
    environment:
      - no_proxy=${no_proxy}
      - https_proxy=${https_proxy}
      - http_proxy=${http_proxy}
      - FRONTEND_SERVICE_IP=chatqna-xeon-ui-server
      - FRONTEND_SERVICE_PORT=5173
      - BACKEND_SERVICE_NAME=chatqna
      - BACKEND_SERVICE_IP=chatqna-xeon-backend-server
      - BACKEND_SERVICE_PORT=8888
      - DATAPREP_SERVICE_IP=dataprep-redis-service
      - DATAPREP_SERVICE_PORT=5000
    ipc: host
    restart: always

[hualongfeng]

I see the DBQna react ui code, the dbqna ui directly send request to text2sql-service for web not ui server. I think the one that deals with the test2sql-service api should be ui-server, not ui-web.

  // Handle generating SQL query
  const handleGenerateSQL = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      const payload = {
        input_text: question,
        conn_str: formData,
      };

      let api_response: Record<string, any>;
      api_response = await axios.post(`${TEXT_TO_SQL_URL}/text2sql`, payload);

      setSqlQuery(api_response.data.result.sql); // Assuming the API returns an SQL query
      setQueryOutput(api_response.data.result.output);
      setSqlError(null)
      setSqlStatus('SQL query output generated successfully')
    } catch (err) {
      setSqlError('Failed to generate SQL query output.');
    } finally {
      setIsLoading(false); // Stop loading
    }
  };

[joshuayao]

Hi @joshuayao

Do you have the nginx configurable example about DBQna. I know DBQna react ui have nginx, but I don't know how to configure it. There are large different between Chatqna and DBQna.

Could you give me a example like Chatqna?:

  chatqna-xeon-nginx-server:
    image: ${REGISTRY:-opea}/nginx:${TAG:-latest}
    container_name: chatqna-xeon-nginx-server
    depends_on:
      - chatqna-xeon-backend-server
      - chatqna-xeon-ui-server
    ports:
      - "${NGINX_PORT:-80}:80"
    environment:
      - no_proxy=${no_proxy}
      - https_proxy=${https_proxy}
      - http_proxy=${http_proxy}
      - FRONTEND_SERVICE_IP=chatqna-xeon-ui-server
      - FRONTEND_SERVICE_PORT=5173
      - BACKEND_SERVICE_NAME=chatqna
      - BACKEND_SERVICE_IP=chatqna-xeon-backend-server
      - BACKEND_SERVICE_PORT=8888
      - DATAPREP_SERVICE_IP=dataprep-redis-service
      - DATAPREP_SERVICE_PORT=5000
    ipc: host
    restart: always

Below is an example. Please specify ${YOUR_FRONTEND_SERVICE_IP} and ${YOUR_BACKEND_SERVICE_IP} according to your environment.

  dbqna-xeon-nginx-server:
    image: ${REGISTRY:-opea}/nginx:${TAG:-latest}
    container_name: dbqna-xeon-nginx-server
    depends_on:
      - text2sql-service
      - dbqna-xeon-react-ui-server
    ports:
      - "${NGINX_PORT:-80}:80"
    environment:
      - no_proxy=${no_proxy}
      - https_proxy=${https_proxy}
      - http_proxy=${http_proxy}
      - FRONTEND_SERVICE_IP=${YOUR_FRONTEND_SERVICE_IP}
      - FRONTEND_SERVICE_PORT=5174
      - BACKEND_SERVICE_NAME=text2sql
      - BACKEND_SERVICE_IP=${YOUR_BACKEND_SERVICE_IP}
      - BACKEND_SERVICE_PORT=${TEXT2SQL_PORT}
    ipc: host
    restart: always

p.s. For distributed setups, we recommend using Kubernetes (K8s) instead of Docker Compose.

[hualongfeng]

Below is an example. Please specify ${YOUR_FRONTEND_SERVICE_IP} and ${YOUR_BACKEND_SERVICE_IP} according to your environment.

dbqna-xeon-nginx-server:
image: ${REGISTRY:-opea}/nginx:${TAG:-latest}
container_name: dbqna-xeon-nginx-server
depends_on:
- text2sql-service
- dbqna-xeon-react-ui-server
ports:
- "${NGINX_PORT:-80}:80"
environment:
- no_proxy=${no_proxy}
- https_proxy=${https_proxy}
- http_proxy=${http_proxy}
- FRONTEND_SERVICE_IP=${YOUR_FRONTEND_SERVICE_IP}
- FRONTEND_SERVICE_PORT=5174
- BACKEND_SERVICE_NAME=text2sql
- BACKEND_SERVICE_IP=${YOUR_BACKEND_SERVICE_IP}
- BACKEND_SERVICE_PORT=${TEXT2SQL_PORT}
ipc: host
restart: always
p.s. For distributed setups, we recommend using Kubernetes (K8s) instead of Docker Compose.

Hi @joshuayao I used nginx and the configuration like you, but But I don't know how to set this variable APP_TEXT_TO_SQL_URL. I don't want to set the specific host IP in the docker compose yaml. I like the endpoint like TGI_LLM_ENDPOINT=http://tgi-service:80 not TGI_LLM_ENDPOINT=http://${host_ip}:8008.

And using dbqna-xeon-nginx-server service, I can access ui by 80 port, but the button cannot work.

This is from dbqna-xeon-react-ui-server service:

This is from dbqna-xeon-nginx-server service

# Copyright (C) 2024 Intel Corporation
# SPDX-License-Identifier: Apache-2.0

services:
  # vllm-service:
  #   image: ${REGISTRY:-opea}/vllm:${TAG:-latest}
  #   container_name: vllm-service
  #   ports:
  #     - "${LLM_ENDPOINT_PORT:-8008}:80"
  #   volumes:
  #     - "${OPEA_DATA_DIR}/models:/data"
  #   shm_size: 128g
  #   environment:
  #     no_proxy: ${no_proxy}
  #     http_proxy: ${http_proxy}
  #     https_proxy: ${https_proxy}
  #     HUGGINGFACE_HUB_CACHE: "/data"
  #     HF_TOKEN: ${HUGGINGFACEHUB_API_TOKEN}
  #     LLM_MODEL_ID: ${LLM_MODEL_ID}
  #     LLM_MODEL_LOCAL_PATH: ${LLM_MODEL_LOCAL_PATH}
  #     VLLM_TORCH_PROFILER_DIR: "/mnt"
  #     DTYPE: ${DTYPE:-float16}
  #     QUANTIZATION: ${QUANTIZATION:-fp8}
  #     MAX_MODEL_LEN: ${MAX_MODEL_LEN:-2048}
  #     MAX_NUM_BATCHED_TOKENS: ${MAX_NUM_BATCHED_TOKENS:-4000}
  #     MAX_NUM_SEQS: ${MAX_NUM_SEQS:-256}
  #     TENSOR_PARALLEL_SIZE: ${TENSOR_PARALLEL_SIZE:-1}
  #     VLLM_CPU_KVCACHE_SPACE: 20  # 增加 KV 缓存空间 (GB 7B need 8-12GB)
  #   healthcheck:
  #     test: ["CMD-SHELL", "curl -f http://vllm-service:80/health || exit 1"]
  #     interval: 10s
  #     timeout: 10s
  #     retries: 100
  #   command: --model $LLM_MODEL_LOCAL_PATH --host 0.0.0.0 --port 80 --served-model-name ${LLM_MODEL_ID}

  tgi-service:
    image: ghcr.io/huggingface/text-generation-inference:2.4.0-intel-cpu
    container_name: tgi-service
    ports:
      - "8008:80"
    volumes:
      - "${OPEA_DATA_DIR}/models:/data"
    environment:
      no_proxy: ${no_proxy}
      http_proxy: ${http_proxy}
      https_proxy: ${https_proxy}
      HUGGINGFACE_HUB_CACHE: "/data"
      HF_TOKEN: ${HUGGINGFACEHUB_API_TOKEN}
      HUGGINGFACEHUB_API_TOKEN: ${HUGGINGFACEHUB_API_TOKEN}
      DTYPE: ${DTYPE:-float16}
      QUANTIZATION: ${QUANTIZATION:-fp8}
      MAX_MODEL_LEN: ${MAX_MODEL_LEN:-2048}
      MAX_NUM_BATCHED_TOKENS: ${MAX_NUM_BATCHED_TOKENS:-4000}
      MAX_NUM_SEQS: ${MAX_NUM_SEQS:-256}
      TENSOR_PARALLEL_SIZE: ${TENSOR_PARALLEL_SIZE:-1}
    shm_size: 32g
    command: --model-id ${LLM_MODEL_ID} --max-total-tokens 8192

  postgres:
    image: postgres:latest
    container_name: postgres-container
    restart: always
    environment:
      - POSTGRES_USER=${POSTGRES_USER}
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
      - POSTGRES_DB=${POSTGRES_DB}
    ports:
      - '5442:5432'
    volumes:
      - ./chinook.sql:/docker-entrypoint-initdb.d/chinook.sql

  text2sql-service:
    image: ${REGISTRY:-opea}/text2sql:${TAG:-latest}
    container_name: text2sql-service
    ports:
      - "9090:8080"
    environment:
      - TGI_LLM_ENDPOINT=http://tgi-service:80

  dbqna-xeon-react-ui-server:
    image: ${REGISTRY:-opea}/text2sql-react-ui:${TAG:-latest}
    container_name: dbqna-xeon-react-ui-server
    depends_on:
      - text2sql-service
    ports:
      - "5174:80"
    environment:
      - no_proxy=${no_proxy}
      - https_proxy=${https_proxy}
      - http_proxy=${http_proxy}
      - APP_TEXT_TO_SQL_URL=v1/
    ipc: host
    restart: always

  dbqna-xeon-nginx-server:
    image: ${REGISTRY:-opea}/nginx:${TAG:-latest}
    container_name: db-xeon-nginx-server
    depends_on:
      - text2sql-service
      - dbqna-xeon-react-ui-server
    ports:
      - "${NGINX_PORT:-80}:80"
    environment:
      - no_proxy=${no_proxy}
      - https_proxy=${https_proxy}
      - http_proxy=${http_proxy}
      - FRONTEND_SERVICE_IP=dbqna-xeon-react-ui-server
      - FRONTEND_SERVICE_PORT=80
      - BACKEND_SERVICE_NAME=text2sql-service
      - BACKEND_SERVICE_IP=text2sql-service
      - BACKEND_SERVICE_PORT=8080
    ipc: host
    restart: always

networks:
  default:
    driver: bridge

[joshuayao]

I see the DBQna react ui code, the dbqna ui directly send request to text2sql-service for web not ui server. I think the one that deals with the test2sql-service api should be ui-server, not ui-web.

  // Handle generating SQL query
  const handleGenerateSQL = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      const payload = {
        input_text: question,
        conn_str: formData,
      };

      let api_response: Record<string, any>;
      api_response = await axios.post(`${TEXT_TO_SQL_URL}/text2sql`, payload);

      setSqlQuery(api_response.data.result.sql); // Assuming the API returns an SQL query
      setQueryOutput(api_response.data.result.output);
      setSqlError(null)
      setSqlStatus('SQL query output generated successfully')
    } catch (err) {
      setSqlError('Failed to generate SQL query output.');
    } finally {
      setIsLoading(false); // Stop loading
    }
  };

I agree. There're concerns to interact with API endpoints in the frontend. But, for now, the GUI of OPEA examples are for demo and design reference only.

[joshuayao]

Below is an example. Please specify ${YOUR_FRONTEND_SERVICE_IP} and ${YOUR_BACKEND_SERVICE_IP} according to your environment.
dbqna-xeon-nginx-server:
image: ${REGISTRY:-opea}/nginx:${TAG:-latest}
container_name: dbqna-xeon-nginx-server
depends_on:

• text2sql-service
• dbqna-xeon-react-ui-server
  ports:
• "${NGINX_PORT:-80}:80"
  environment:
• no_proxy=${no_proxy}
• https_proxy=${https_proxy}
• http_proxy=${http_proxy}
• FRONTEND_SERVICE_IP=${YOUR_FRONTEND_SERVICE_IP}
• FRONTEND_SERVICE_PORT=5174
• BACKEND_SERVICE_NAME=text2sql
• BACKEND_SERVICE_IP=${YOUR_BACKEND_SERVICE_IP}
• BACKEND_SERVICE_PORT=${TEXT2SQL_PORT}
  ipc: host
  restart: always
  p.s. For distributed setups, we recommend using Kubernetes (K8s) instead of Docker Compose.

Hi @joshuayao I used nginx and the configuration like you, but But I don't know how to set this variable APP_TEXT_TO_SQL_URL. I don't want to set the specific host IP in the docker compose yaml. I like the endpoint like TGI_LLM_ENDPOINT=http://tgi-service:80 not TGI_LLM_ENDPOINT=http://${host_ip}:8008.

And using dbqna-xeon-nginx-server service, I can access ui by 80 port, but the button cannot work.

This is from dbqna-xeon-react-ui-server service:

This is from dbqna-xeon-nginx-server service

# Copyright (C) 2024 Intel Corporation
# SPDX-License-Identifier: Apache-2.0

services:
  # vllm-service:
  #   image: ${REGISTRY:-opea}/vllm:${TAG:-latest}
  #   container_name: vllm-service
  #   ports:
  #     - "${LLM_ENDPOINT_PORT:-8008}:80"
  #   volumes:
  #     - "${OPEA_DATA_DIR}/models:/data"
  #   shm_size: 128g
  #   environment:
  #     no_proxy: ${no_proxy}
  #     http_proxy: ${http_proxy}
  #     https_proxy: ${https_proxy}
  #     HUGGINGFACE_HUB_CACHE: "/data"
  #     HF_TOKEN: ${HUGGINGFACEHUB_API_TOKEN}
  #     LLM_MODEL_ID: ${LLM_MODEL_ID}
  #     LLM_MODEL_LOCAL_PATH: ${LLM_MODEL_LOCAL_PATH}
  #     VLLM_TORCH_PROFILER_DIR: "/mnt"
  #     DTYPE: ${DTYPE:-float16}
  #     QUANTIZATION: ${QUANTIZATION:-fp8}
  #     MAX_MODEL_LEN: ${MAX_MODEL_LEN:-2048}
  #     MAX_NUM_BATCHED_TOKENS: ${MAX_NUM_BATCHED_TOKENS:-4000}
  #     MAX_NUM_SEQS: ${MAX_NUM_SEQS:-256}
  #     TENSOR_PARALLEL_SIZE: ${TENSOR_PARALLEL_SIZE:-1}
  #     VLLM_CPU_KVCACHE_SPACE: 20  # 增加 KV 缓存空间 (GB 7B need 8-12GB)
  #   healthcheck:
  #     test: ["CMD-SHELL", "curl -f http://vllm-service:80/health || exit 1"]
  #     interval: 10s
  #     timeout: 10s
  #     retries: 100
  #   command: --model $LLM_MODEL_LOCAL_PATH --host 0.0.0.0 --port 80 --served-model-name ${LLM_MODEL_ID}

  tgi-service:
    image: ghcr.io/huggingface/text-generation-inference:2.4.0-intel-cpu
    container_name: tgi-service
    ports:
      - "8008:80"
    volumes:
      - "${OPEA_DATA_DIR}/models:/data"
    environment:
      no_proxy: ${no_proxy}
      http_proxy: ${http_proxy}
      https_proxy: ${https_proxy}
      HUGGINGFACE_HUB_CACHE: "/data"
      HF_TOKEN: ${HUGGINGFACEHUB_API_TOKEN}
      HUGGINGFACEHUB_API_TOKEN: ${HUGGINGFACEHUB_API_TOKEN}
      DTYPE: ${DTYPE:-float16}
      QUANTIZATION: ${QUANTIZATION:-fp8}
      MAX_MODEL_LEN: ${MAX_MODEL_LEN:-2048}
      MAX_NUM_BATCHED_TOKENS: ${MAX_NUM_BATCHED_TOKENS:-4000}
      MAX_NUM_SEQS: ${MAX_NUM_SEQS:-256}
      TENSOR_PARALLEL_SIZE: ${TENSOR_PARALLEL_SIZE:-1}
    shm_size: 32g
    command: --model-id ${LLM_MODEL_ID} --max-total-tokens 8192

  postgres:
    image: postgres:latest
    container_name: postgres-container
    restart: always
    environment:
      - POSTGRES_USER=${POSTGRES_USER}
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
      - POSTGRES_DB=${POSTGRES_DB}
    ports:
      - '5442:5432'
    volumes:
      - ./chinook.sql:/docker-entrypoint-initdb.d/chinook.sql

  text2sql-service:
    image: ${REGISTRY:-opea}/text2sql:${TAG:-latest}
    container_name: text2sql-service
    ports:
      - "9090:8080"
    environment:
      - TGI_LLM_ENDPOINT=http://tgi-service:80

  dbqna-xeon-react-ui-server:
    image: ${REGISTRY:-opea}/text2sql-react-ui:${TAG:-latest}
    container_name: dbqna-xeon-react-ui-server
    depends_on:
      - text2sql-service
    ports:
      - "5174:80"
    environment:
      - no_proxy=${no_proxy}
      - https_proxy=${https_proxy}
      - http_proxy=${http_proxy}
      - APP_TEXT_TO_SQL_URL=v1/
    ipc: host
    restart: always

  dbqna-xeon-nginx-server:
    image: ${REGISTRY:-opea}/nginx:${TAG:-latest}
    container_name: db-xeon-nginx-server
    depends_on:
      - text2sql-service
      - dbqna-xeon-react-ui-server
    ports:
      - "${NGINX_PORT:-80}:80"
    environment:
      - no_proxy=${no_proxy}
      - https_proxy=${https_proxy}
      - http_proxy=${http_proxy}
      - FRONTEND_SERVICE_IP=dbqna-xeon-react-ui-server
      - FRONTEND_SERVICE_PORT=80
      - BACKEND_SERVICE_NAME=text2sql-service
      - BACKEND_SERVICE_IP=text2sql-service
      - BACKEND_SERVICE_PORT=8080
    ipc: host
    restart: always

networks:
  default:
    driver: bridge

1. Docker compose deployment supports single-node setup only. Please use k8s approach.
2. If you have to use Docker compose, you can try to add the following configuration in your nginx.conf(main branch code). We do NOT suggest to use this workaround because it's not validated.

location /v1/postgres/health {
	proxy_pass http://${BACKEND_SERVICE_IP}:${BACKEND_SERVICE_PORT};
	proxy_set_header Host $host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header X-Forwarded-Proto $scheme;

	proxy_buffering off;
	proxy_cache off;
	proxy_request_buffering off;
	gzip off;
}