I am trying to load web fonts from a CDN, but am getting a Cross Origin Request error. I have set the following headers in my httpd conf file:
Header Add Access-Control-Allow-Origin: my-cdn-domain
and
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
and I see the Access-Control header in the console, but the fonts still do not load.
Does anyone have any ideas?
It turns out that this had to do with us moving the site over to https. When we moved the site, we didn't update the origins in the cdn to be https also and that was causing the source to actually be our non-https server!
Header Add Access-Control-Allow-Origin: my-cdn-domain
Your CDN domain has to give permission to your HTML domain, not the other way around.
Related
I've tried to fetch data from Wordpress API in Vue App.
I am using DigitalOcean with Apache.
I've set Header set Access-Control-Allow-Origin "*" in vhost.
But now I've got an error like this:
Access to XMLHttpRequest at xxx from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, *', but only one is allowed.
I am using axios for requests.
Do you have any ideas what's going on?
Is it server side issue or should I set something in axios config?
Thanks.
This is a server-side issue. You need to enable CORS in your apache config, by either:
Setting Header set Access-Control-Allow-Origin "*" - meaning that all origins are allowed to make requests to this server
Setting Header set Access-Control-Allow-Origin "http://localhost:3000"
This tells the server to accept requests from this origin(s), to further explain.
https://enable-cors.org/server_apache.html
Change your header set statement to:
Header always set Access-Control-Allow-Origin "*"
Otherwise Apache will prepend origin in request to the header, which causes the issue.
I am developing a HTML5 Javascript app to get an image from my local server which runs on the same machine as the app. When I run the app on my Chrome, I got:
Access to Image at 'http://localhost/someDIrectory/1.jpg' from origin
'http://localhost:50000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:50000' is therefore not allowed
access.
From many questions here, the answers point out that I need to set
header("Access-Control-Allow-Origin: *");
in php file and it should work, but that is for php files... What about an image or a directory with images?
I have also came across How do I enable cross-origin resource sharing on XAMPP? and tried to add
<IfModule C:\xampp\htdocs\someDIrectory\1.jpg>
Header set Access-Control-Allow-Origin: *
</IfModule>
into httpd.conf. I tried restart XAMPP and retried the above. But the result I got is still the same.
How to correctly set up such setting for XAMPP?
Note: I am using Construct 2 which is basically exported out as an HTML5/Javascript. I am simply using Sprite Load From URL action.
Create a file called ".htaccess" in the directory of your files and add the following to the file.
Header set Access-Control-Allow-Origin "http://localhost:50000/"
You need to create the .htaccess file first and put it on your root document of application and then set it at the beginning of the file
Header set Access-Control-Allow-Origin *
Cheers,
I have installed and configured an Apache server with a virtualhost which serves images.
When I load my page with images on the browser the second time (the images should be on cache after the first time the page is loaded), the browser doesnt get the images (or files) from cache, and think that it should.
What is wrong? I am using Google Chrome, and when I load some other web from other server the cache works, so I think that I have some problem with the Apache, but I am not sure.
Thank you very much.
The response is a video-segment which is played by Dash player.
Response headers:
accept-ranges:bytes
content-length:194431
date:Wed, 09 Mar 2016 07:42:07 GMT
etag:"2f77f-52acd33f8b167"
last-modified:Tue, 02 Feb 2016 17:55:12 GMT
server:Apache/2.4.18 (Unix) OpenSSL/1.0.2e PHP/7.0.2
status:200
After doing that:
ExpiresActive On
# Set up caching on media files for 1 year (forever?)
<FilesMatch "\.(mp4|m4s)$">
ExpiresDefault "access plus 3600 seconds"
Header set Cache-Control "public"
Header set Content-Type "video/mp4"
Header set Vary "Host"
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
The headers are:
accept-ranges:bytes
access-control-allow-origin:*
cache-control:public
content-length:194431
content-type:video/mp4
But it doesnt save on the cache, I mean, when I reload the web or the video, it does not get it from the cache as it should.
You are not including any cache-control headers telling the browser to cache the resources. The spec is unclear how to handle this but most browsers choose not to cache unless explicitly told to.
You need to include Apache config like this (assuming you are already including the mod_expiries module):
ExpiresActive On
# Set up caching on media files for 1 week
<filesMatch ".([iI][cC][oO]|[gG][iI][fF]|[jJ][pP][gG]|[jJ][pP][eE][gG]|[pP][nN][gG]|[fF][lL][vV]|[pP][dD][fF]|[sS][wW][fF]|[mM][oO][vV]|[mM][pP]3|[wW][mM][vV]|[pP][pP][tT])$">
ExpiresDefault A604800
Header append Cache-Control "public"
</filesMatch>
# Set up caching on font files for 6 months
<filesMatch ".([eE][oO][tT]|[tT][tT][fF]|[sS][vV][gG]|[Ww][Oo][Ff][Ff]|[Ww][Oo][Ff][Ff]2)$">
ExpiresDefault 15552000
Header append Cache-Control "public"
</filesMatch>
Which will then produce a header like this:
cache-control:max-age=10800, public
I've written a blog post on this if you want more details: https://www.tunetheweb.com/performance/http-performance-headers/caching/
OK, I have solved the problem.
I was using an https connection and the certificate I was using didnt have the correct parameters (common name must be the name of the url programmed on the server) and the certificate of the server must be authenticate by some CA, so I have made CA certificates to authenticate the server certificates. This means that if you have an unsecure https connection, Chrome does not save files on cache.
After having all the certificates corrected, I have upload to google chrome the certificates to trust my web (configuration of google Chrome, advanced options, Manage https/ssl certificates). After that, I can save files on cache because of the certificates which makes the https connection secure (green lock on the chrome url bar).
That was my problem and this is how I solved it.
Thanks for your answers and your time!! ;)
My website supports both http and https protocols. However using the code below in .htaccess file, I can only set one domain to allow CORS requests:
Header set Access-Control-Allow-Origin: http://example.com
I want to allow CORS for both http and https versions of my site (not just "*") and tried the solutions here:
Access-Control-Allow-Origin Multiple Origin Domains?
But the problem is that all solutions rely on Origin header in the request which may not exist and also is not secure. (anyone can put a origin header in their request)
I want to know if the request has been served over https and use this info to set the proper CORS header. Something like this:
SetEnvIf servedOverHttps httpsOrigin=true
Header set Access-Control-Allow-Origin: https://example.me env=httpsOrigin
SetEnvIf notServedOverHttps httpOrigin=true
Header set Access-Control-Allow-Origin: http://example.me env=httpOrigin
How can I find out that it's a https request?
Have you tried using HTTPS variable?
It will be set to "on" for all https requests.
Your .htaccess should look like this
Header set Access-Control-Allow-Origin: http://example.com #default
Header set Access-Control-Allow-Origin: https://example.com env=HTTPS #override if https
My site runs on Apache and I have set expires headers in my .htaccess file like so:
<ifmodule mod_expires.c>
<FilesMatch "\.(ico|jpg|jpeg|png|gif|swf)$">
ExpiresActive On
ExpiresDefault "access plus 1 year"
Header append Cache-Control "public"
</FilesMatch>
</ifmodule>
This works great for images that come from my domain. However, 95% of my images are hosted on a cdn called CDN77, which runs on Nginx.
When I run Yslow on my site, it says that all the images being served from CDN77 do not have expires set. I have also confirmed the expires header is not set for those images by viewing the headers in LiveHTTP (Firefox headers viewer plugin).
CDN77 has said they have no way on their end to configure this.
Any thoughts or ideas as to how to set the expires for the images served from the cdn?
Change your CDN. First of all, they SHOULD allow clients to create exceptions for headers and nginx has a very elaborate configuration set for that. Secondly, the default mode should be to copy response headers from the upstream server (you), and only change or add headers that is specific to the CDN, like the host header, server header and strip any cookie headers you may be sending.
You’re not able to set expiry headers on files that are hosted on CDN77. If you require custom cache headers, you’ll need to contact their support department.
Expiry headers will be applied to all files on your CDN. It’s not possible to apply different expiry values to indiviudal files or specific file types.