Allow CORS for UI Builder

General
1

Hi All,

There is a way to allow CORS requests into UI Builder.
I would like to share some json files through the UI Builder node...

I don't find anything about that, only for the soket.io...
I also try to activate CORS on the nodered params and that's works for the http node but not for the UI Builder...

Thanks for your help !

2

Hi, UIBUILDER makes use of ExpressJS and Socket.IO to provide the services.

For the HTTP side, by default, UIBUILDER uses Node-RED's built-in user-facing ExpressJS server which is the same as used for the core http-in/-response nodes. If you read the Node-RED settings.js file, you will find the CORS settings for that server in there.

Alternatively, you can tell UIBUILDER to use its own ExpressJS server and in that case, you can set the CORS settings under the uibuilder section of settings.js

The ExpressJS (v4) docs site has the details of CORS for Express.

On the Socket.IO side, you can control that for UIBUILDER under the uibuilder section of settings.js as described in the uibuilder docs. Check the Socket.IO docs for details of their settings.

That should work as long as you haven't told UIBUILDER to use a separate ExpressJS server.

3

Thank you very much for your reply.

Unfortunately I can't find a solution. When I use the http node it's ok, but as soon as I want to go through UI Builder node I have the answer which is in the attached screenshot...

I don't get it...

Request
Request1763Ă—202 141 KB

4

Let me check.

Can you share the CORS settings you've added to settings.js?

Also, can you give more of an indication of what you are trying to do? Looks like you are trying to load a JSON file from the front-end code? Is that right? If so, a work-around might be to load it using Node-RED and pass it to uibuilder.

5

OK, some testing later, I can see that unexpectedly, using the httpNodeCors setting in setting.js does NOT set the header for CORS when used with UIBUILDER. Nor does it set it for either of the 2 Dashboards! It ONLY sets it for the http-in/-response nodes. To be fair, this is implied in the comments.

Sorry, if you read what I just deleted - it was rubbish. I thought that setting httpNodeMiddleware would impact uibuilder as well - I'm sure it used to. But it certainly does not do so now. Will give more instructions in a second.

OK, proper instructions:

  1. Locate your uibuilder root folder - usually ~/.node-red/uibuilder. It should contain a .config sub-folder.
  2. In that folder, there should be a file called uibMiddleware.js.template. Either rename it to remove the .template or copy it to a file called uibMiddleware.js.
  3. Edit that file. You will see a function called uibMw. That is the uibuilder equivalent of the httpNodeMiddleware setting.
  4. Add res.setHeader('Access-Control-Allow-Origin', '*') to that function BEFORE the line next() (which must be the last entry).
  5. Save the file and restart Node-RED.

Now you will have the correct header. Obviously, you can choose a more specific setting than * if you know what domains you need to access.

Sorry for the misinformation. I really must enhance the uibuilder settings in settings.js to include a hook for the Express middleware as I have done for the Socket.IO middleware. Would be much easier than having to use a separate file.

2 Likes
6

I'm so sorry for the delay in responding.
I just set up the solution and it's exactly what was needed!!!!

Thank you so much

1 Like
7

No worries, sorry that I confused matters. I will add something about CORS to the UIBUILDER documentation though while I remember. :slight_smile: