187

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: http://tzook.info/bot/

But on this other website it shows the error: http://cantloseweight.co/robot/

I uploaded the loading script to jsfiddle: http://jsfiddle.net/TL5LK/

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.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Tzook Bar Noy
  • 11,337
  • 14
  • 51
  • 82

9 Answers9

349

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>
vifargent
  • 3,551
  • 1
  • 13
  • 4
  • 2
    if we match files by adding the filesmatch block, then what does the `*` do? – shenkwen Jun 21 '16 at 14:08
  • 1
    And do I need to restart the server after doing this? I apply the code above but it still won't let me access \.json, I changed `js` to `json`. – shenkwen Jun 21 '16 at 14:12
  • 4
    @shenkwen The `*` allows any origin domain to access this resource. It's not a list of resources, but a list of referencing domains. – SparK Nov 23 '16 at 12:34
  • 4
    In case it doesn't work, you should try enabling the `headers` module: `a2enmod headers` – Joaquín O Apr 29 '19 at 12:32
  • 1
    For completeness, to anyone that is using `access-control-allow-origin` dynamically (changing the URL value based on the requesting origin) instead of `*`, you must also include the header `Vary: Origin`. See https://fetch.spec.whatwg.org/#cors-protocol-and-http-caches – Null Jun 07 '19 at 20:23
  • How this will work when there are GET parameters after `?`? – pbies Mar 22 '22 at 13:55
79

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.

Lukas Liesis
  • 24,652
  • 10
  • 111
  • 109
  • 3
    been trying all the options I could find on Google and, as you said, no one said anything about mod_headers. Thank! – Sirkong Sep 06 '16 at 19:13
  • 1
    My mod_headers are active and added this line in .htaccess(same place as mentioned), but still am getting this error: Response for preflight has invalid HTTP status code 400..Pls suggest! – Sushivam Apr 16 '17 at 04:49
  • 2
    mod_headers was the missing thing! This is working perfectly with .htaccess rule. Thank you. – Andy Aug 09 '17 at 17:36
  • @SachinS a 400 error is not found, 500 is server error. Start there. – Andy Aug 09 '17 at 17:36
40

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 http://www.vknyvz.com  
    Header set Access-Control-Allow-Credentials true
</IfModule>
  • credentials can be true or false depending on your ajax request params
vknyvz
  • 653
  • 7
  • 12
25

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>
Hexodus
  • 12,361
  • 6
  • 53
  • 72
Thoman
  • 742
  • 2
  • 9
  • 20
  • 1
    It should be noted that the above `` directive is unnecessary, _if_, as suggested above, your `.htaccess` file is in your fonts directory _and_ your fonts directory _only_ contains `.eot`, .`ttf`, `.otf` and/or `.woff` files. – Mesagoma Feb 07 '17 at 16:19
11

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

10

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

songololo
  • 4,724
  • 5
  • 35
  • 49
  • This is the only solution that worked for me on my Ubuntu 16.10 server. – kneeki Sep 05 '17 at 00:48
  • This worked also for me. I'm using Ubuntu 16.04 server. Thank you. – jhedm Jan 12 '18 at 06:22
  • Worked for me on Ubuntu 18.04. Firefox 70.0.1 wasn't happy with just the Access-Control-Allow-Origin header, though, and I had to add the Access-Control-Allow-Methods one as well. – borizzzzz Dec 01 '19 at 08:45
  • @songololo I could not locate this file for apache in Centos 7. I looked everywhere in the /etc/httpd directory. Can you please let me know how can I implement it on Centos? – Mainuddin Jul 11 '20 at 13:59
  • @Mainuddin, sorry, I'm not familiar with Centos. Hopefully someone else can chime in. – songololo Jul 12 '20 at 14:18
  • 1
    Hi! if the .htaccess answers don't work for you, but this one does, then you probably have to enable .htaccess by setting `AllowOverride All` in your server config file (/etc/apache2/apache2.conf) – the.polo Jun 08 '21 at 12:04
9

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

Saman
  • 5,044
  • 3
  • 28
  • 27
3

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 – https://stackoverflow.com/a/27872891/614524

Community
  • 1
  • 1
JDavis
  • 3,228
  • 2
  • 22
  • 23
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

Hans Ganteng
  • 179
  • 1
  • 4