Cross-Origin request warning for google fonts

问题:

I am using Google Webfonts on my website. In the console on Chrome I get the following warning:

Blink is considering rejecting non spec-compliant cross-origin web font requests: http://fonts.gstatic.com/s/raleway/v8/0dTEPzkLWceF7z0koJaX1A.woff2. Please use Access-Control-Allow-Origin to make these requests spec-compliant.

Upon inspecting the request headers there appears to not be any Access-Control headers present:

Remote Address:109.231.231.219:80
Request URL:http://fonts.gstatic.com/s/raleway/v8/0dTEPzkLWceF7z0koJaX1A.woff2
Request Method:GET
Status Code:304 Not Modified
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,en-GB;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
DNT:1
Host:fonts.gstatic.com
If-Modified-Since:Mon, 04 Aug 2014 17:04:46 GMT
Origin:http://samarkanddesign.com
Referer:http://samarkanddesign.com/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Response Headersview source
Age:369865
Date:Fri, 08 Aug 2014 02:01:39 GMT
Expires:Sat, 08 Aug 2015 02:01:39 GMT
Server:GFE/2.0

What can I do to solve this? Can anyone explain what's going on as I don't fully understand CORS. The page when viewed in firefox and IE seems to block the font request.

One thing to note is that I'm viewing the site on my company network. It might have a strange setting or proxy that strips out Access-Control headers. Can anyone one a normal connection verify the headers are usually present? The page is at http://samarkanddesign.com

回答1:

Ok, so clearly Google Fonts allows cross-domain access or their service wouldn't be much use.

The explanation for my particular problem is that I'm on a corporate internet connection. It must use some proxy that is stripping out access control headers from web responses. This causes the browser to give warnings or failures when loading the resources.

I've contacted IT warning them about their misconfigured proxy and hopefully this will be fixed.

回答2:

CORS header is not being served under certain circumstances. Fonts are failing to set this header randomly.

This is a Google bug and you can't fix this as they are not serving the header. I recommend to cease using this buggy Google CDN service and download fonts instead and serve them from your web server.

回答3:

If you have this issue just in one browser:

I had a Chrome Browser Extension running which caused this problem. In my case it was "Alexa page rank" - but test out all your extensions by disabling one after the other.