Goglides Dev 🌱

Balkrishna Pandey
Balkrishna Pandey

Posted on

Magento: Resolving Static Content Loading Issue on Non-Standard Port 8080

When working with Magento on Kubernetes, you may encounter an issue where static content, such as scripts and stylesheets, is being loaded using a non-standard port like 8080. This can cause problems with Content Security Policy (CSP) directives, leading to blocked resources and errors in your application.

For example, you might see an error like this in your browser console:

shop.example.com/:1 [Report Only] Refused to load the script 'https://shop.example.com:8080/static/version1725312468/frontend/Magento/luma/en_US/requirejs/require.js' because it violates the following Content Security Policy directive: "script-src assets.adobedtm.com *.adobe.com secure.authorize.net test.authorize.net www.googleadservices.com www.google-analytics.com www.paypalobjects.com js.braintreegateway.com www.paypal.com geostag.cardinalcommerce.com 1eafstag.cardinalcommerce.com geoapi.cardinalcommerce.com 1eafapi.cardinalcommerce.com songbird.cardinalcommerce.com includestest.ccdc02.com www.sandbox.paypal.com t.paypal.com s.ytimg.com www.googleapis.com vimeo.com www.vimeo.com *.vimeocdn.com https://www.gstatic.com/recaptcha/ https://www.google.com/recaptcha/ assets.braintreegateway.com c.paypal.com pay.google.com api.braintreegateway.com api.sandbox.braintreegateway.com client-analytics.braintreegateway.com client-analytics.sandbox.braintreegateway.com *.paypal.com 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

This issue typically occurs when the base URLs for secure and unsecure content are incorrectly configured to include the port 8080.

Diagnosing the Issue

You can confirm this issue by querying the core_config_data table in your Magento database:

SELECT * FROM core_config_data WHERE path LIKE 'web/%/base_url';
Enter fullscreen mode Exit fullscreen mode

This query will return something like:

+-----------+---------+----------+-----------------------+---------------------------------+---------------------+
| config_id | scope   | scope_id | path                  | value                           | updated_at          |
+-----------+---------+----------+-----------------------+---------------------------------+---------------------+
|        18 | default |        0 | web/secure/base_url   | https://shop.example.com:8080/  | 2024-09-02 21:27:08 |
|        19 | default |        0 | web/unsecure/base_url | http://shop.example.com:8080/   | 2024-09-02 21:27:09 |
+-----------+---------+----------+-----------------------+---------------------------------+---------------------+
Enter fullscreen mode Exit fullscreen mode

Resolving the Issue

To resolve this, you need to update the base URLs to remove the port 8080. You can do this directly in your database with the following queries:

UPDATE core_config_data SET value = 'https://shop.example.com/' WHERE path = 'web/secure/base_url';
UPDATE core_config_data SET value = 'http://shop.example.com/' WHERE path = 'web/unsecure/base_url';
Enter fullscreen mode Exit fullscreen mode

Flushing the Cache

After updating the database, it's essential to flush the Magento cache to ensure the changes take effect. You can do this by accessing your Magento container and running the following command:

kubectl exec -it production-shop-magento-557c64674-9g8c6 -n production bash
/opt/bitnami/magento/bin/magento cache:flush
Enter fullscreen mode Exit fullscreen mode

By correctly configuring your base URLs and ensuring that they do not include non-standard ports like 8080, you can prevent issues with CSP directives and ensure that your static content loads correctly.

Top comments (0)