[4.x]: Various CP JavaScript errors with CP on different domain

[baileydoestech]

What happened?

Description

I suspect this is a result of hosting our CP on a different domain to the primary site, we are seeing some strange JavaScript errors in the CP.

Steps to reproduce (using DDEV but reproducible in an AWS environment as well)

1. Standard Craft installation using DDEV with CP on separate domain to main site i.e.
   BASE_CP_URL="https://admin.ddev.site"
PRIMARY_SITE_URL="https://main.ddev.site"

2. Add NGINX configuration to allow CORS
   `
   location ~* .(?:js?)$ {
   add_header Access-Control-Allow-Origin "*";
   }

Expected behavior

JS bundles should load as expected in the CP and not cause any console errors

Actual behavior

We see the following issues:

1. Attempting to create a new matrix block throws a console error (only when selecting the Matrix field type): Uncaught TypeError: Craft.MatrixConfigurator is not a constructor. This prevents any model dialog from rendering (i.e. when adding a new block type), can workaround this by trying to save the field, which fails, and then the model will appear as expected (no JS error anymore)
   
   Once reloaded the 'bubble' appears
   

2. Similar issue seen with the Image Resizer plugin, I had raised this in Uncaught TypeError ResizeElementAction verbb/image-resizer#77 but given the above wondering if the problem is more Craft related?

3. When adding new entries field, we see Uncaught ReferenceError: htmx is not defined, possible that this is coming from the Sprig plugin (that's the only thing I can think of using htmx?) but odd this only affects the entries selection?
   

4. We also see the above when selecting blocks inside a Vizy field
   

Craft CMS version

Craft Pro 4.5.3

PHP version

8.2.9

Operating system and version

Linux

Database type and version

MariaDB 10.4.30

Image driver and version

Imagick 3.7.0 (ImageMagick 6.9.11-60)

Installed plugins and versions (all latest)

• Amazon S3
• AsyncQueue
• CKEditor
• Feed Me
• Formie
• ImageOptimize
• Image Resizer
• Retour
• SEOMatic
• Sprig
• Super Table
• Vite
• Vizy

[baileydoestech]

Here is an example repo where the issue can be replicated: https://github.com/baileydoestech/test-craft

Confirmed that I can reproduce the issue without any plugins installed (so the HTMX issue is unrelated to Sprig), I added back in image resizer to showcase the issue raised in their repo (but I assume that is cause by some issue in Craft)

[i-just]

Hi, thanks for getting in touch and for the example repo!

This is happening because the control panel resources are trying to be accessed via the front-end URL (default: @web/cpresources, and you have your @web alias set to the PRIMARY_SITE_URL).

Instead of setting the Access-Control-Allow-Origin in the nginx configuration (for both js and fonts), you can use the resourceBaseUrl config setting and set it to, e.g. <control panel URL>/cpresources in which case the resources will be accessible via the same domain as the Control Panel and all should start working as expected.

I’m going to go ahead and close this now, but please don’t hesitate to get in touch if you have any further problems.