CORS issue on a fresh install

ruzzzz6312 commented 2 months ago

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] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
[X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.16

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Installation method Self-hosted using Docker

Steps to Reproduce Installation as per https://docs.dify.ai/getting-started/install-self-hosted/docker-compose All good. Then proceeding to http://localhost:8080/install (using SSH tunneling) or to http://domain.....com/install

Seeing this blank screen with CORS errors.

Tried accessing here: http://localhost:8080/signin, I see the page but I have to initialize first, so when I click, I see same as in step #2.

Console logs: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.console.dify.xxx.com/console/api/system-features. (Reason: CORS request did not succeed). Status code: (null).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.console.dify.xxx.com/console/api/system-features. (Reason: CORS request did not succeed). Status code: (null).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Please help, thanks!

P.S. I checked both github and discord search

My ENV. [ec2-user@xxx docker]$ cat .env | grep "URL" The backend URL of the console API, CONSOLE_API_URL=https://api.console.dify.xxx.com/ The front-end URL of the console web, CONSOLE_WEB_URL=https://console.dify.xxx.com/ SERVICE_API_URL=https://api.dify.xxx.com/ used to declare the back-end URL for the front-end API. APP_API_URL=https://api.app.dify.xxx.com/ APP_WEB_URL=https://app.dify.xxx.com/ FILES_URL=https://app.dify.xxx.com/ CHECK_UPDATE_URL=https://updates.dify.ai/

✔️ Expected Behavior

Expected Behavior I was execting to continue installation process

❌ Actual Behavior

Actual Behavior I see an infinite loader with CORS errors in console

dosubot[bot] commented 2 months ago

Hey @ruzzzz6312! I'm here to help you with any bugs, questions, or contributions you have for the Dify repository. Let's tackle this CORS issue together while we wait for the human maintainer.

To resolve the CORS issue on your fresh install of Dify version 0.6.16, which is self-hosted using Docker, you need to update the CORS configuration in your docker-compose.yml file. Here are the steps:

Update the .env file: Ensure that all URLs are correctly set to your specific domain names:

CONSOLE_API_URL=https://api.console.dify.xxx.com/
CONSOLE_WEB_URL=https://console.dify.xxx.com/
SERVICE_API_URL=https://api.dify.xxx.com/
APP_API_URL=https://api.app.dify.xxx.com/
APP_WEB_URL=https://app.dify.xxx.com/

Update the docker-compose.yml file: Make sure the environment variables in the docker-compose.yml file are also set to allow CORS from all origins:
```
environment:
 CONSOLE_CORS_ALLOW_ORIGINS: "*"
 WEB_API_CORS_ALLOW_ORIGINS: "*"
```

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 your_domain.com;

   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;
       }
   }
}

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].

To continue talking to Dosu, mention @dosu.

ruzzzz6312 commented 2 months ago

OMG, fixed. Very hard to figure out how to deploy HTTPS. It took some time.

Key is in .ENV: CERTBOT_DOMAIN to include all NGINX_HTTPS_ENABLED=true NGINX_ENABLE_CERTBOT_CHALLENGE=true

PLease update instructions for future users

taowang1993 commented 2 months ago

I also struggled with these url configs. In the end, I configured only one which is the APP_WEB_URL.

I am not really sure why we need to configure so many urls....

Are you using all of them?

OMG, fixed. Very hard to figure out how to deploy HTTPS. It took some time.

Key is in .ENV: CERTBOT_DOMAIN to include all NGINX_HTTPS_ENABLED=true NGINX_ENABLE_CERTBOT_CHALLENGE=true

PLease update instructions for future users

langgenius / dify