How can I make the CORS works?

[KevinZhang19870314]

Self Checks

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

Dify version

0.11.0

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Does anyone know how CORS works? I expected this setting to block other domains from embedding my web app, but when I embed the Dify web app in my local Vue 3 project (localhost:1002), it works without any errors. Can someone help me understand why?

My Setup and Scenarios:

1. Docker Compose Setup:
   I configured Dify with EXPOSE_NGINX_PORT=8001, allowing access via http://localhost:8001/apps.
   Relevant environment variables:

   CONSOLE_API_URL=http://localhost:8001
   CONSOLE_WEB_URL=http://localhost:8001
   SERVICE_API_URL=http://localhost:8001
   APP_API_URL=http://localhost:8001
   APP_WEB_URL=http://localhost:8001
   
   WEB_API_CORS_ALLOW_ORIGINS=https://dify.app
   CONSOLE_CORS_ALLOW_ORIGINS=https://dify.app
   
   EXPOSE_NGINX_PORT=8001
   EXPOSE_NGINX_SSL_PORT=8002

2. Vue 3 Project:
   I built a basic Vue 3 project running on http://localhost:1002 and embedded the Dify app into it.

3. Embed Workflow:
   I created a workflow in Dify, published it, and used the following embed code in the Vue 3 project:

   <script>
     window.difyChatbotConfig = {
       token: 'SfLqVQKRRmtqbbaq',
       baseUrl: 'http://localhost:8001'
     }
   </script>
   <script
     src="http://localhost:8001/embed.min.js"
     id="SfLqVQKRRmtqbbaq"
     defer>
   </script>
   <style>
     #dify-chatbot-bubble-button {
       background-color: #1C64F2 !important;
     }
     #dify-chatbot-bubble-window {
       width: 24rem !important;
       height: 40rem !important;
     }
   </style>

4. Testing:
   After copying the embed code to my Vue 3 project, I was able to interact with the workflow seamlessly.

The Issue:

I expected this setup to trigger a CORS error since I limited WEB_API_CORS_ALLOW_ORIGINS and CONSOLE_CORS_ALLOW_ORIGINS to https://dify.app. However, everything works fine without any errors.

Question:
How can I configure CORS properly to prevent other domains from embedding my chatbot? What am I missing in my setup?

✔️ Expected Behavior

I expected this setup to trigger a CORS error since I limited WEB_API_CORS_ALLOW_ORIGINS and CONSOLE_CORS_ALLOW_ORIGINS to https://dify.app.

❌ Actual Behavior

However, everything works fine without any errors.

[dosubot[bot]]

It seems like you're experiencing an issue where your CORS settings are not being enforced as expected. Here are a few things to consider:

1. CORS Configuration in Dify: Dify uses the flask_cors.CORS middleware to enforce CORS policies. The environment variables WEB_API_CORS_ALLOW_ORIGINS and CONSOLE_CORS_ALLOW_ORIGINS are used to specify which origins are allowed to access the resources. By default, these are set to allow all origins (*), but you have configured them to only allow https://dify.app ^[1][2].

2. Default CORS Settings: If these environment variables are not explicitly set, Dify might fall back to default values. For example, WEB_API_CORS_ALLOW_ORIGINS defaults to *, allowing all origins, while CONSOLE_CORS_ALLOW_ORIGINS might default to a specific origin like ["https://example.com"] ^[3].

3. Check for Overrides: Ensure that there are no other configurations or defaults in your setup that might override your specified CORS settings. Double-check your environment variable settings and any related configuration files.

4. NGINX Configuration: If you're using NGINX as a reverse proxy, ensure that it is not interfering with your CORS settings. Sometimes, NGINX configurations can override or bypass application-level CORS settings.

5. Testing and Debugging: Verify that the environment variables are correctly set in your Docker environment. You can do this by checking the logs or using debugging tools to ensure that the CORS headers are being applied as expected.

By reviewing these aspects, you should be able to identify why the CORS settings are not being enforced as you intended. If the issue persists, consider checking the Dify documentation or any related discussions for additional insights.

To continue talking to Dosu, mention @dosu.

[KevinZhang19870314]

@dosu I’m using docker compose up -d to start Dify. Everything is set to default except for the environment settings mentioned above. I expected this setup to trigger a CORS error when interacting with the embedded chatbot in the workflow within my Vue 3 project.

[crazywoola]

For questions, please use discussion instead.