I'm creating a script that loads externally on other sites. It loads CSS and HTML and works fine on my own servers.

However, when I try it on another website it displays this awful error:

Access-Control-Allow-Origin

Here you can see it loads perfectly:

But on this other website it shows the error:

I uploaded the loading script to jsfiddle:

I tried editing the htaccess file like this:

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

Or like this:

Header set Access-Control-Allow-Origin *

But it still doesn't work.

9 Answers

Try this in the .htaccess of the external root folder :

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

And if it only concerns .js scripts you should wrap the above code inside this:

<FilesMatch "\.(js)$"> ... </FilesMatch>
7

no one says that you also have to have mod_headers enabled, so if still not working, try this:

(following tips works on Ubuntu, don't know about other distributions)

you can check list of loaded modules with 

apache2ctl -M

to enable mod_headers you can use

a2enmod headers

of course after any changes in Apache you have to restart it:

/etc/init.d/apache2 restart

Then you can use

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

And if mod_headers is not active, this line will do nothing at all. You can try skip if clause and just add Header set Access-Control-Allow-Origin "*" in your config, then it should throw error during start if mod_headers is not active.

4

from my experience;

if it doesn't work from within php do this in .htaccess it worked for me

<IfModule mod_headers.c> Header set Access-Control-Allow-Origin Header set Access-Control-Allow-Credentials true </IfModule>
  • credentials can be true or false depending on your ajax request params
1

Add an .htaccess file with the following directives to your fonts folder, if have problems accessing your fonts. Can easily be modified for use with .css or .js files.

<FilesMatch "\.(eot|ttf|otf|woff)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch>
1

In Zend Framework 2.0 i had this problem. Can be solved in two way .htaccess or php header i prefer .htaccess so i modified .htaccess from:

RewriteEngine On RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^.*$ index.php [NC,L]

to 

RewriteEngine On <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^.*$ index.php [NC,L]

and it start to work

1

The other answers didn't work for me, this is what ended up doing the trick for apache2:

1) Enable the headers mod:

sudo a2enmod headers

2) Create the /etc/apache2/mods-enabled/headers.conf file and insert:

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

3) Restart your server:

sudo service apache2 restart

6

BTW: the .htaccess config must be done on the server hosting the API. For example you create an AngularJS app on x.com domain and create a Rest API on y.com, you should set Access-Control-Allow-Origin "*" in the .htaccess file on the root folder of y.com not x.com :)

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

Also as Lukas mentioned make sure you have enabled mod_headers if you use Apache

Make sure you don't have a redirect happening. This can happen if you don't include the trailing slash in the URL.

See this answer for more detail –

0

If your host not at pvn or dedicated, it's dificult to restart server.

Better solution from me, just edit your CSS file (at another domain or your subdomain) that call font eot, woff etc to your origin (your-domain or www yourdomain). it will solve your problem.

I mean, edit relative url on css to absolute url origin domain