I deployed dify on the server and got a CORS error when initializing on the client.

[0sengseng0]

Self Checks

• [X] This is only for bug report, if you would like to ask a question, please head to Discussions.
• [X] I have searched for existing issues search for existing issues, including closed ones.
• [X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [X] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• [X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.12-fix1

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

I changed everything in.env and docker-compose.yaml that refers to CONSOLE_API_URL to a specific ip address, but when the page is initialized, the interface is still localhost. What is wrong

.env

CONSOLE_API_URL=http://192.168.... CONSOLE_WEB_URL=http://192.168.... SERVICE_API_URL=http://192.168.*** APP_API_URL=http://192.168.... APP_WEB_URL=http://192.168....

docker-compose.yaml

x-shared-env: &shared-api-worker-env LOG_LEVEL: ${LOG_LEVEL:-INFO} DEBUG: ${DEBUG:-false} FLASK_DEBUG: ${FLASK_DEBUG:-false} SECRET_KEY: ${SECRET_KEY:-sk-9f73s3ljTXVcMT3Blb3ljTqtsKiGHXVcMT3BlbkFJLK7U} INIT_PASSWORD: ${INIT_PASSWORD:-} CONSOLE_WEB_URL: ${CONSOLE_WEB_URL:-} CONSOLE_API_URL: http://192.168.***

web: image: langgenius/dify-web:0.6.12-fix1 restart: always environment: CONSOLE_API_URL: http://192.168.***

✔️ Expected Behavior

The page can be initialized normally

❌ Actual Behavior

CORS error occurred while page initialization

[dosubot[bot]]

To resolve the CORS error when initializing the client page after deploying Dify version 0.6.12-fix1 on a self-hosted server using Docker with a specific IP address, ensure that the CORS configuration is correctly set in both the .env file and the docker-compose.yaml file. Here are the steps:

1. Update the .env file: Ensure that all URLs are correctly set to your specific IP address:

   CONSOLE_API_URL=http://192.168.x.x:5001
   CONSOLE_WEB_URL=http://192.168.x.x
   SERVICE_API_URL=http://192.168.x.x/service
   APP_API_URL=http://192.168.x.x/app
   APP_WEB_URL=http://192.168.x.x

2. Update the docker-compose.yaml file: Make sure the environment variables in the docker-compose.yaml file are also set to the correct IP address:

   x-shared-env: &shared-api-worker-env
    LOG_LEVEL: ${LOG_LEVEL:-INFO}
    DEBUG: ${DEBUG:-false}
    FLASK_DEBUG: ${FLASK_DEBUG:-false}
    SECRET_KEY: ${SECRET_KEY:-sk-9f73s3ljTXVcMT3Blb3ljTqtsKiGHXVcMT3BlbkFJLK7U}
    INIT_PASSWORD: ${INIT_PASSWORD:-}
    CONSOLE_WEB_URL: http://192.168.x.x
    CONSOLE_API_URL: http://192.168.x.x:5001
   
   web:
    image: langgenius/dify-web:0.6.12-fix1
    restart: always
    environment:
      CONSOLE_API_URL: http://192.168.x.x:5001

3. Set CORS headers in Nginx: If you are using Nginx as a reverse proxy, ensure that the CORS headers are correctly set in your nginx.conf:

   server {
      listen 80;
      server_name 192.168.x.x;
   
      location / {
          proxy_pass http://api:5001;
          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;
   
          # Add CORS headers
          add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
          add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
   
          # Handle preflight requests
          if ($request_method = OPTIONS) {
              add_header 'Access-Control-Allow-Origin' '*';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
              add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
              add_header 'Access-Control-Max-Age' 1728000;
              add_header 'Content-Type' 'text/plain charset=UTF-8';
              add_header 'Content-Length' 0;
              return 204;
          }
      }
   }

4. Restart Docker containers: After making these changes, restart your Docker containers to apply the new configurations:

   docker-compose down
   docker-compose up -d

By ensuring these configurations are correctly set, you should be able to resolve the CORS error ^[1][2][3][4].

To continue talking to Dosu, mention @dosu.

[crazywoola]

See bot's reply.