mirror of
https://github.com/open-webui/docs.git
synced 2025-12-12 07:29:49 +07:00
Document CORS requirements for direct external tools
Added section on CORS and direct tools, including example code for Node.js.
This commit is contained in:
committed by
GitHub
parent
634ab19d99
commit
04c90de2a5
@@ -1584,6 +1584,45 @@ async def create_dashboard():
|
||||
|
||||
The embedded content automatically inherits responsive design and integrates seamlessly with the chat interface, providing a native-feeling experience for users interacting with your tools.
|
||||
|
||||
#### CORS and Direct Tools
|
||||
|
||||
Direct external tools are tools that run directly from the browser. In this case, the tool is called by JavaScript in the user's browser.
|
||||
Because we depend on the Content-Disposition header, when using CORS on a remote tool server, the OpenWeb UI cannot read that header due to Access-Control-Expose-Headers, which prevents certain headers from being read from the fetch result.
|
||||
To prevent this, you must set Access-Control-Expose-Headers to Content-Disposition. Check the example below of a tool using Node.js:
|
||||
|
||||
|
||||
```javascript
|
||||
const app = express();
|
||||
const cors = require('cors');
|
||||
|
||||
app.use(cors())
|
||||
|
||||
app.get('/tools/dashboard', (req,res) => {
|
||||
let html = `
|
||||
<div style="padding: 20px;">
|
||||
<h2>System Dashboard</h2>
|
||||
<canvas id="myChart" width="400" height="200"></canvas>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
const ctx = document.getElementById('myChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: { /* your chart data */ }
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
`
|
||||
res.set({
|
||||
'Content-Disposition': 'inline'
|
||||
,'Access-Control-Expose-Headers':'Content-Disposition'
|
||||
})
|
||||
res.send(html)
|
||||
})
|
||||
```
|
||||
|
||||
More info about the header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Access-Control-Expose-Headers
|
||||
|
||||
|
||||
## External packages
|
||||
|
||||
In the Tools definition metadata you can specify custom packages. When you click `Save` the line will be parsed and `pip install` will be run on all requirements at once.
|
||||
|
||||
Reference in New Issue
Block a user