Hello happybeing
I can assume that the issue you're encountering with the ERR_BLOCKED_BY_ORB error is likely related to Cross-Origin Resource Sharing (CORS) restrictions.
When you access the API directly from your Svelte app, the browser may allow it due to the same-origin policy, but when the FileManager tries to access it, it may not have the necessary permissions or headers set up.
Here are some advice that probably can resolve your issue:
1.Make sure your API server (running on http://localhost:8080) is configured to allow requests from your Svelte app's origin (http://localhost:5173). You can do this by adding the appropriate CORS headers. If you're using Express.js, for example, you can use the cors package:
const cors = require('cors');
app.use(cors({
origin: 'http://localhost:5173'
}));
2.You can set up a proxy in your Svelte app's development server to avoid CORS issues. In your vite.config.js, you can add a proxy configuration:
export default {
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
};
Then, you can modify your API requests in your app to use /api as the prefix.
3.If you don't have control over the API server, you can use a local CORS proxy during development. There are tools like cors-anywhere that you can run locally to bypass CORS restrictions:
npx cors-anywhere
And here is the working example of filemanager with previewURL functionality:
https://stackblitz.com/edit/sveltejs-kit-template-default-x9hfnvlj?file=src%2Froutes%2FMyFileManager.svelte
