How to add an Access-Control-Allow-Origin header

Question

I am designing a website  e g  mywebsite com  and this site loads font-face fonts from another site  say anothersite com   I was having problems with the font face font loading in Firefox and I read on this blog       Firefox  which supports  font-face   from v3 5  does not allow cross-domain   fonts by default   This means the font   must be served up from the same domain    and sub-domain  unless you can add an      Access-Control-Allow-Origin    header   to the font    How can I set the Access-Control-Allow-Origin header to the font

User · Answer

Check this link   It will definitely solve your problem   There are plenty of solutions to make cross domain GET Ajax calls BUT POST REQUEST FOR CROSS DOMAIN IS SOLVED HERE  It took me 3 days to figure it out   http   blogs msdn com b carlosfigueira archive 2012 02 20 implementing-cors-support-in-asp-net-web-apis aspx

User · Answer

According to the official docs  browsers do not like it when you use the  Access-Control-Allow-Origin        header if you re also using the  Access-Control-Allow-Credentials   true    header   Instead  they want you to allow their origin specifically   If you still want to allow all origins  you can do some simple Apache magic to get it to work  make sure you have mod headers enabled    Header set Access-Control-Allow-Origin    HTTP ORIGIN e  env HTTP ORIGIN   Browsers are required to send the Origin header on all cross-domain requests   The docs specifically state that you need to echo this header back in the Access-Control-Allow-Origin header if you are accepting planning on accepting the request   That s what this Header directive is doing

User · Answer

The accepted answer doesn t work for me unfortunately  since my site CSS files  import the font CSS files  and these are all stored on a Rackspace Cloud Files CDN   Since the Apache headers are never generated  since my CSS is not on Apache   I had to do several things    Go to the Cloud Files UI and add a custom header  Access-Control-Allow-Origin with value    for each font-awesome file Change the Content-Type of the woff and ttf files to font woff and font ttf respectively   See if you can get away with just  1  since the second requires a bit of command line work   To add the custom header in  1    view the cloud files container for the file scroll down to the file click the cog icon click Edit Headers select Access-Control-Allow-Origin add the single character      without the quotes  hit enter repeat for the other files   If you need to continue and do  2  then you ll need a command line with CURL  curl -D - --header  X-Auth-Key  your-auth-key-from-rackspace-cloud-control-panel  --header  X-Auth-User  your-cloud-username  https   auth api rackspacecloud com v1 0   From the results returned  extract the values for X-Auth-Token and X-Storage-Url  curl -X POST     -H  Content-Type  font woff      --header  X-Auth-Token  returned-x-auth-token  returned-x-storage-url name-of-your-container fonts fontawesome-webfont woff  curl -X POST     -H  Content-Type  font ttf      --header  X-Auth-Token  returned-x-auth-token  returned-x-storage-url name-of-your-container fonts fontawesome-webfont ttf   Of course  this process only works if you re using the Rackspace CDN  Other CDNs may offer similar facilities to edit object headers and change content types  so maybe you ll get lucky  and post some extra info here

User · Answer

For Java based Application add this to your web xml file    lt servlet-mapping gt       lt servlet-name gt default lt  servlet-name gt       lt url-pattern gt   ttf lt  url-pattern gt   lt  servlet-mapping gt    lt servlet-mapping gt       lt servlet-name gt default lt  servlet-name gt       lt url-pattern gt   otf lt  url-pattern gt   lt  servlet-mapping gt    lt servlet-mapping gt       lt servlet-name gt default lt  servlet-name gt       lt url-pattern gt   eot lt  url-pattern gt   lt  servlet-mapping gt    lt servlet-mapping gt       lt servlet-name gt default lt  servlet-name gt       lt url-pattern gt   woff lt  url-pattern gt   lt  servlet-mapping gt

User · Answer

In your file php of request ajax  can set value header    lt  php header  Access-Control-Allow-Origin         for all   gt

User · Answer

So what you do is    In the font files folder put an htaccess file with the following in it    lt FilesMatch     ttf otf eot woff woff2    gt     lt IfModule mod headers c gt      Header set Access-Control-Allow-Origin        lt  IfModule gt   lt  FilesMatch gt    also in your remote CSS file  the font-face declaration needs the full absolute URL of the font-file  not needed in local CSS files     e g    font-face       font-family   LeagueGothicRegular       src  url  http   www example com css fonts League Gothic eot    format  eot             url  http   www example com css fonts League Gothic woff   format  woff             url  http   www example com css fonts League Gothic ttf   format  truetype             url  http   www example com css fonts League Gothic svg        That will fix the issue  One thing to note is that you can specify exactly which domains should be allowed to access your font  In the above htaccess I have specified that everyone can access my font with     however you can limit it to   A single URL   Header set Access-Control-Allow-Origin http   example com  Or a comma-delimited list of URLs   Access-Control-Allow-Origin  http   site1 com http   site2 com   Multiple values are not supported in current implementations

[header] How to add an Access-Control-Allow-Origin header

Examples related to header

Examples related to cors

Examples related to font-face