'No 'Access-Control-Allow-Origin' header is present' error when loading external JS in UI Page pop up

[Ian-Fusion3]

I have an external JS library that I am loading into a UI Page to handle some file manipulation. When I select "Try It" from the UI Page's record it loads the external JS correctly. However the moment I try to load the UI Page from a UI Action with GlideModal I receive the following error message.

Access to XMLHttpRequest at 'https://EXTERNAL_FILE_URL' from origin 'https://CLIENTURL.service-now.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[paulwings]

The error message "No 'Access-Control-Allow-Origin' header is present on the requested resource" typically occurs in web development when you are trying to make a cross-origin XMLHttpRequest (XHR) or fetch request, but the server hosting the requested resource doesn't include the necessary CORS (Cross-Origin Resource Sharing) headers to allow the request from a different origin (domain). To fix this, you need to configure the server to include the "Access-Control-Allow-Origin" header in its response with the appropriate origin value, which can be a specific domain or "*" to allow requests from any origin. For example, in Node.js with Express, you can set the header like this: res.header("Access-Control-Allow-Origin", "*"); Ensure that you also handle other CORS headers and methods as needed, depending on your specific use case and security requirements.