Skip to content

fix(nui): use internal proxy to bypass mixed content & bump node engine#33

Open
Jaysigx wants to merge 2 commits intoitschip:mainfrom
Jaysigx:main
Open

fix(nui): use internal proxy to bypass mixed content & bump node engine#33
Jaysigx wants to merge 2 commits intoitschip:mainfrom
Jaysigx:main

Conversation

@Jaysigx
Copy link

@Jaysigx Jaysigx commented Mar 25, 2026

Title: Fix NUI Mixed Content Upload Errors & Node Engine Unavailability

What this PR fixes:

  1. TypeError: Failed to fetch on NUI Uploads (Mixed Content/CORS):
    When third-party resources (like lb-phone or rcore_clothing_for_photos) use screenshot-basic's requestScreenshotUpload inside a secure modern FiveM ui_page context (https://cfx-nui...), Chrome's strict security policies natively block fetch('http://[server-ip]/upload').
    Additionally, the Koa router previously ignored OPTIONS preflight requests, immediately returning a 405 Method Not Allowed, thereby failing the CORS check.
  2. Yarn engines Strict Check Failure:
    FiveM's built-in Resource Builder uses a bundled Node v16.9.1 runtime executable. Because package.json strictly enforced "node": ">=22.0.0", FiveM's internal Yarn builder forcefully crashed out during the automatic install process, preventing users from simply starting the script out of the box.

How it was fixed:

  • Yarn Patch: Removed the "engines" restriction entirely from package.json to let FiveM's integrated Yarn seamlessly fetch/install packages.
  • NUI Callback Upload Proxy: Rather than using the unreliable client-side HTTP serverEndpoint which suffers from WebKit secure context isolation, I created a dedicated NUI callback (screenshot_upload_proxy).
    The frontend NUI now seamlessly encodes the image as a base64 string and passes it down to the Client Lua/JS environment instantly. The Client then uses TriggerLatentServerEvent to proxy the Base64 stream directly to the Server.
  • Backend KOA Adaptation: Exposed the internal Koa Server's file uploader block, converting the Base64 chunks back into native buffer instances to identically recreate the FormData structure before forwarding the payload directly to the external webhook via node-fetch.

@Gordon-Ramsay6001
Copy link

This has undergone full testing with over 16,000 images no errors produced.

@itschip
Copy link
Owner

itschip commented Mar 25, 2026

Hey @Jaysigx , I'll test it out today! Thanks for the PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants