No 'Access-Control-Allow-Origin' header is present

Plone Support
1

Hi Guys,
I'm seeking for your in Plone. I issue is when I'm not in inspect element mode the embedded javascript is not fully loaded properly but when I'm in inspect element mode the embedded javascript is successfully loaded. I already changed the settings for nasty tags and customized the configuration in my frontend (Apache). Please see below for details:

Screen Shot 2017-07-25 at 10.03.30 AM.png2560×1266 186 KB

Screen Shot 2017-07-25 at 10.04.06 AM.png2560×1426 1.33 MB

Screen Shot 2017-07-25 at 10.05.02 AM.png1288×268 30.1 KB

Below is my configuration in Apache:
UseCanonicalName On

NameVirtualHost *
<VirtualHost *>
ServerName 13.228.28.211
ServerSignature On

Header set X-Frame-Options "SAMEORIGIN"
Header set Strict-Transport-Security "max-age=15768000; includeSubDomains"
Header set X-XSS-Protection "1; mode=block"
Header set X-Content-Type-Options "nosniff"
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials: true
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Request-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

ProxyVia On

# prevent your web server from being used as global HTTP proxy
<LocationMatch "^[^/]">
  Deny from all
</LocationMatch>

<Proxy *>
    Order deny,allow
    Allow from all
</Proxy>

RewriteEngine on
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
RewriteRule ^/(.*) http://localhost:8080/VirtualHostBase/http/%{HTTP_HOST}:80/PayMaya/VirtualHostRoot/$1 [P,L]

<VirtualHost *>
ServerAlias *
ServerRoot /var/www
ServerSignature On

Thanks,
Jayson

2

It's not clear what you're asking, or perhaps the post title is misleading. Are there any errors in the browser console?

3

Hi @tkimnguyen,

The main error in the console is:

XMLHttpRequest cannot load https://api.tackthis.co/shop/33026/page?frontend=true. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://tackthis.co' is therefore not allowed access.

You may visit the link below. You will notice that the iframe cannot load fully but when you are in inspect element mode (Chrome) it loads perfectly. I don't know how to resolve this.

http://52.77.218.219/shop

4

What you're describing isn't a Plone specific issue. This is related to javascript and cross origin requests. see this explanation: https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource

5

Take a look at https://docs.plone.org/manage/deploying/front-end/nginx.html#nginx and you'll see sample headers that will fix the problem.