# Allow CORS for UI Builder

**URL:** <https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [23 January 2025 10:28 UTC](https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838 "2025-01-23T10:28:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cdacruz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cdacruz/32/29482_2.png) [@cdacruz](https://discourse.nodered.org/u/cdacruz)\
**Post date:** [23 January 2025 10:28 UTC](https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838/1 "2025-01-23T10:28:35Z")

</div>

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](http://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 !

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 January 2025 13:21 UTC](https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838/2 "2025-01-23T13:21:45Z")

</div>

Hi, UIBUILDER makes use of ExpressJS and [Socket.IO](http://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](http://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](http://Socket.IO) docs for details of their settings.

> [@cdacruz](#):
>
> I also try to activate CORS on the nodered params and that's works for the http node but not for the UI Builder...

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

---

<div class="post-metadata">

**Author:** ![cdacruz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cdacruz/32/29482_2.png) [@cdacruz](https://discourse.nodered.org/u/cdacruz)\
**Post date:** [24 January 2025 09:45 UTC](https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838/3 "2025-01-24T09:45:55Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f3591efff31f107c8ba539d3c157ec172f6b17e9.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 January 2025 14:11 UTC](https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838/4 "2025-01-24T14:11:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 January 2025 14:50 UTC](https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838/5 "2025-01-24T14:50:24Z")

</div>

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](http://Socket.IO) middleware. Would be much easier than having to use a separate file.

---

<div class="post-metadata">

**Author:** ![cdacruz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cdacruz/32/29482_2.png) [@cdacruz](https://discourse.nodered.org/u/cdacruz)\
**Post date:** [29 January 2025 14:22 UTC](https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838/6 "2025-01-29T14:22:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 January 2025 14:24 UTC](https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838/7 "2025-01-29T14:24:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [12 February 2025 14:25 UTC](https://discourse.nodered.org/t/allow-cors-for-ui-builder/94838/8 "2025-02-12T14:25:35Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.