CORS Issue - Wordpress on AWS - Coudfront offloaded media and assets

richard3 2019-10-03 21:07:23 UTC #1

Keywords: WordPress - AWS - Technical issue - Other
bnsupport ID: bc86c108-b470-5234-9cb5-5e799471b1f8
Description:
I get lots of CORS errors. I have implemented the instructions here: https://docs.bitnami.com/aws/apps/wordpress/configuration/enable-cors-wordpress/

I have uploaded a support bundle to here:
bc86c108-b470-5234-9cb5-5e799471b1f8

Thank you. Richard

michiel 2019-10-04 07:55:27 UTC #2

Did you install any plugins or change any configuration files? Can you describe the steps to reproduce the issue?

Regards,
Michiel

richard3 2019-10-04 16:02:11 UTC #3

Thank you Michael.

https://staging.boxtreeclinic.com shows the CORS errors. There are two places where I have adjusted my application for CORS.

**/opt/bitnami/apps/wordpress/conf/htaccess.conf**

# OFFLOAD MEDIA CORS ISSUE
<FilesMatch ".(eot|otf|ttf|woff|woff2)">
    Header always set Access-Control-Allow-Origin "*"
</FilesMatch>

**/opt/bitnami/apps/wordpress/conf/httpd-app.conf**

RewriteEngine On
RewriteRule /<none> / [L,R]

<IfDefine USE_PHP_FPM>
    <Proxy "unix:/opt/bitnami/php/var/run/wordpress.sock|fcgi://wordpress-fpm" timeout=300>
    </Proxy>
</IfDefine>

<Directory "/opt/bitnami/apps/wordpress/htdocs">
    Options +MultiViews +FollowSymLinks
    AllowOverride None
    <IfVersion < 2.3 >
        Order allow,deny
        Allow from all
    </IfVersion>
    <IfVersion >= 2.3>
        Require all granted
    </IfVersion>

    # Added for CORS - Start #
    Header set Access-Control-Allow-Origin "*"
    # Added for CORS - Stop #

    <IfDefine USE_PHP_FPM>
       <FilesMatch \.php$>
         SetHandler "proxy:fcgi://wordpress-fpm"
       </FilesMatch>
    </IfDefine>

    RewriteEngine On
    #RewriteBase /wordpress/
    RewriteRule ^index\.php$ - [S=1]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.php [L]

    Include "/opt/bitnami/apps/wordpress/conf/banner.conf"
</Directory>

# Added for CORS - Start #
<Directory "/opt/bitnami/apps/wordpress/htdocs/wp-admin">
    Header set Access-Control-Allow-Origin "\*"
    Header set Access-Control-Allow-Methods "GET, OPTIONS, POST"
    Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type, accept"
</Directory>
# Added for CORS - Stop #

Include "/opt/bitnami/apps/wordpress/conf/htaccess.conf"

richard3 2019-10-04 16:03:32 UTC #4

The issue appeared after updating my theme from 2.9.3 to 2.9.4. (Reign Theme)

michiel 2019-10-07 09:36:14 UTC #5

Could you try resetting the permissions?

sudo find ~/apps/app/htdocs/ -type f -exec chmod 644 {} \;
sudo find ~/apps/app/htdocs/ -type d -exec chmod 755 {} \;
sudo find ~/apps/app/htdocs/ -type d -exec chown bitnami:daemon {} \;

Please, click on if you think my answer was helpful

joedostie 2019-10-09 22:32:33 UTC #6

Hi, has there been any movement on this. I am struggling with the same situation and I am fairly confident I have followed all the directions as prescribed. I have been working on this issue for about 2 months and I just cant seem to get it done.

I have a development site on:
AWS EC2 with a Bitnami Stack - WordPress Certified by Bitnami and Automattic-5-2-3-0 on Ubuntu 16-04-Autogen By AWSMP

I have a CloudFront setup with

Allowed HTTP Methods = GET, HEAD, OPTIONS
Whitelist Headers = Access-Control-Allow-Origin and Origin
Query String Forwarding and Caching = Forward all, cache based on all

My EC2 is configured to run Virtual Hosts per these instructions:
https://docs.bitnami.com/oci/infrastructure/lamp/configuration/configure-custom-application/
And all works well.

I have created custom conf files for the site (htaccess.conf / httpd-app.conf / httpd-prefix.conf)
In the httpd-app.cof added

Header set Access-Control-Allow-Origin "*"

I also added

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, OPTIONS, POST"
Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type, accept"

I have used both CometCachePro and WP Fastest Cache with the exact same results.

I have cleared my cache when testing

I have fixed and reset all permissions

I have cycled all services after all changes

I just frustrated at this point becuase I am fairly certain that its a server configuration issue, I just have no idea where to go next.

I also ran the support bundle and succesfully uploaded with this code: e5d54f31-267a-9ce3-fd3f-f3420f54a67c

I would greatly appreciate any input!

This is a dev site so I'm flexible on the access...

Thanks!!!!

michiel 2019-10-10 13:13:28 UTC #7

I'm forwarding the issue to another team, they will update the topic or request additional information.

Regards,
Michiel

rajzzsoni 2019-10-11 18:28:29 UTC #8

Hi @micheal,
Even i have same sort of trouble i have installed offload media lite to connect s3 bucket with wordpress site and then i have started receiving cors error. below is screenshot.

I have added cors policy to my bucket listed here.
Even though i have same trouble.

i am getting this error in fancy product designer plugin.

shall i create a new thread or continue with same.
sorry if i posted this incorrect place.

Thanks and Regards
Rajesh Soni

jariza 2019-10-14 07:11:22 UTC #9

Hi Rajesh and Joe,

Are you receiving this CORS issue on every browser? Did you try different ones (Chrome, Firefox, Safari, etc.) and different versions?
Are you able to reproduce the issue when disabling other cache components such as Pagespeed (which is incluced in Bitnami WP images)?

Best regards,

Juan Ariza

rajzzsoni 2019-10-14 07:49:54 UTC #10

Let me explain you scenario first.
I have hosted site on lightsail bitnami stack.
for images i have chosen amazon S3 and configured it using offload media lite plugin.
now when ever i am loading images hosted in S3 to fancy product designer i get cors error.

thanks and regards
Rajesh Soni

rajzzsoni 2019-10-14 08:00:43 UTC #11

this are the following errors i am receiving.

thanks and regards
Rajesh Soni

jariza 2019-10-16 07:22:40 UTC #12

Hi Rajesh,

Thanks for the detailed explanation.

AFAIK, the error you're receiving can be caused for two reasons:

HTTP/HTTPS mixed content (you'll find dozens of threads on this Community providing solutions to it).
CORS disabled on every WP directory (e.g. it's disabled for wp-content but it's not for wp-admin).

When you followed the guide below, did you enable CORS for every directory? Did you restart Apache after applying the changes?

https://docs.bitnami.com/aws/apps/wordpress/configuration/enable-cors-wordpress

I'd like to take a look to your Apache configuration and we have a Support Tool that will gather relevant information for us to analyze your configuration and logs. Could you please download and execute it on the machine where the stack is running by following the steps described in the guide below?

How to Run the Bitnami Support Tool

Please note that you need to paste the code outputted by the tool in your reply.

Best regards,

Juan Ariza

Powered by Discourse, best viewed with JavaScript enabled

Bitnami provides free all-in-one installers, virtual machines and cloud images for popular open source applications. Get them now!

SugarCRM

Drupal

WordPress

Joomla!

Redmine