langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 20:15:31 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

How can I make the CORS works? #6862

New Issue
Closed
opened 2026-02-21 18:17:43 -05:00 by yindo · 3 comments
yindo commented 2026-02-21 18:17:43 -05:00
Owner
Copy Link
Copy Source

Originally created by @KevinZhang19870314 on GitHub (Nov 20, 2024).

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.

Originally created by @KevinZhang19870314 on GitHub (Nov 20, 2024). ### Self Checks - [X] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [X] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [X] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:） - [X] 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: ```env 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: ```html <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.
yindo added the 🙋‍♂️ question label 2026-02-21 18:17:43 -05:00
yindo closed this issue 2026-02-21 18:17:43 -05:00
yindo commented 2026-02-21 18:17:43 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Nov 20, 2024):

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.

@dosubot[bot] commented on GitHub (Nov 20, 2024): <!-- Answer --> 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` <sup>[[1]](https://github.com/langgenius/dify-docs/blob/main/jp/getting-started/install-self-hosted/environments.md)</sup><sup>[[2]](https://github.com/langgenius/dify/blob/main/api/app_factory.py)</sup>. 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"]` <sup>[[3]](https://github.com/langgenius/dify/blob/main/docker-legacy/docker-compose.yaml)</sup>. 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. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
yindo commented 2026-02-21 18:17:43 -05:00
Author
Owner
Copy Link
Copy Source

@KevinZhang19870314 commented on GitHub (Nov 20, 2024):

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

@KevinZhang19870314 commented on GitHub (Nov 20, 2024): @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.
yindo commented 2026-02-21 18:17:43 -05:00
Author
Owner
Copy Link
Copy Source

@crazywoola commented on GitHub (Nov 20, 2024):

For questions, please use discussion instead.

@crazywoola commented on GitHub (Nov 20, 2024): For questions, please use discussion instead.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 🙋‍♂️ question
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#6862
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?