jdepypere
jdepypere

Reputation: 3553

Allow access from subdomain

I'm making a new version of my website on a subdomain of my main site. The url of my main site is http://chirotremelo.be and my subdomain is http://v2.chirotremelo.be . My server setup is the public_html folder with within the 'old' version of the website, along with folders with images. There is also a v2 folder in this folder, containing my new version which also uses images from the standard website.

I develop my new version on my local machine, also having the v2 folder inside the main site. This is done so I can easily update it.

Now, because my v2 loads resources from the v2 version as well as the main site version, I set the <base> to http://chirotremelo.be/. To include files from the v2 folder I simply add v2/ in front of a certain url.

Locally this works nicely, but on my live version it doesn't seem to load eg http://chirotremelo.be/v2/newSite.css. The error shown is:

Imported resource from origin 'http://chirotremelo.be' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://v2.chirotremelo.be' is therefore not allowed access.

I have searched around for this but can't seem to find any solutions right away. I think it might have something to do with my .htaccess file, so here it is included:

php_value date.timezone Europe/Brussels

<FilesMatch ".php$">
AddHandler x-httpd-php54 .php
</FilesMatch>

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?chirotremelo\.be/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

RewriteCond %{HTTP_HOST}  ^www.chirotremelo.be [nocase]
RewriteRule ^(.*)         http://chirotremelo.be/ [last,redirect=301]

I know this might not be a lot to go on but I've never worked with subdomains before. I have successfully used http://v2.chirotremelo.be/newSite.css, but it kind of needs to be with a base of the non-subdomain to load the content that is only available on the main site.

Upvotes: 2

Views: 801

Answers (1)

ConcurrentHashMap
ConcurrentHashMap

Reputation: 5084

This problem called Cross-Origin-Resource-Sharing (or CORS in short). You will find many questions here facing the problem, especially for asynchronous JavaScript requests.

It is some kind of browser related issue; the server will still serve the files requested, but the browser blocks it to prevent that a site will load "bad" content from a "bad" site. You need to send a CORS-Header with your server response to let the browser allow it.

In your case (as this is not a production site), I would advise you the following solution:

You could try to add

<IfModule mod_headers.c>
  Header add Access-Control-Allow-Origin "*"
</IfModule>

to your .htaccess file. (Note, this needs mod_headers in Apache to be enabled, but I guess this is enabled by default).

This is not the best solution, especially there might be more elegant ones with redirect rules. But it should work for this special case (testing/beta site).

Upvotes: 2

Related Questions