CORS Error when using streaming with sockets on frontend

[mk0y]

Describe the bug When I use Flowise on newest Next.js frontend, using the Javascript fetch function, I'm getting "Access has been blocked by CORS policy".

To Reproduce Steps to reproduce the behavior:

1. Install any React app or React-based framework
2. Follow the streaming instructions: https://docs.flowiseai.com/using-flowise/streaming
3. Have two different ports for your frontend app and for your Flowise app (e.g. 3001 and 3002, respectively)
4. See error

Expected behavior

I expect easy way to configure Access-Control-Allow-Origin header on Flowise side.

Screenshots

Setup

• Installation: yarn start
• Flowise Version: 1.4.10
• OS: macOS
• Browser chrome

Additional context I'm NOT using server component in Next.js. It's a client component that has "use client" on top of the file.

[automaton82]

Flowise does not issue CSP, CORS or other headers at all by default and the websocket is open to all (from what I've seen).

You're better off using a reverse proxy and issuing the headers you want from them. This isn't a bug, but really a feature request for Flowise to implement support for the various headers. But given hosting is almost always with a reverse proxy, you can already do it yourself easily.

[automaton82]

If you don't use a reverse proxy, then the feature I did in https://github.com/FlowiseAI/Flowise/pull/1608 should have solved this one.

Suggest getting latest, edit the .env and set the new options to the domains you want to allow.