google maps - Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

Question

I am using google maps api and on the page I have this

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

now, because of this, as you can see in this link

https://fonts.googleapis.com/css?family=Roboto:300,400,500 there are font files - included by url, and AFA i understand it causes the problem. In firebug it shows

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff This can be fixed by moving the resource to the same domain or enabling CORS.

Even trying to add this in my htaccess, does not work, it still shows the error in firebug

Header set Access-Control-Allow-Origin: *

apache's headers mod is enabled, I have other headers set and it is ok. Im using xampp 1.7.4. I also do not want to move the css file and/or the fonts into my local files, because of possible changes in the future by google.

qsn1: how to handle this error.

qsn2: why it shows error only with those font files ? Because e.g. I have google maps api's script included as well, and there is no problem with that.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

Thanks

Metaphysics

i'm getting the same error. i have google maps in 3 different pages on a project, and strangely it happens only to one of them. This may help me find the problem. I will investigate and come back hopefully with an answer. – Teetotalism

@Sharky, thanks for the comment, I have google maps on multiple pages as well, though in my case I see errors in all of them. thank you – Metaphysics

some months later, this thing still happening sometimes. i blame a race condition of some kind, will investigate further. – Teetotalism

For me, I was using Firefox on Windows, and it finally started working after browsing to the Network tab, deleting all the history there, and then doing a hard-refresh. – Corinthians

Answer 1

I was getting the error because Adblock was enabled. Disabling Adblock solved the problem

Menefee

Answer 2

This was happening for me in Firefox, when on a HTTPS page, and when I was loading stylesheet from fonts.googleapis.com via HTTPS connection. In my case I used "protocol relative link", i.e. "//fonts.googleapis.com/" rather than "https://fonts.googleapis.com/", anyhow the same scenario as you described occurred. Specifically, the stylesheet loaded correctly over HTTPS connection, however some of the WOFF files that were referenced in the stylesheet were not loading, as they were being blocked by Firefox, with CORS warnings appearing in the Console.

I went and fixed some other unrelated issues, where some other scripts were loading incorrectly (had been set to load one script over HTTP instead of HTTPS). Fixed that issue then I noticed that all of a sudden the Google Fonts issue was fixed. Unsure whether that was by co-incidence or not.

My suggestion: ensure all other issues/warnings/errors being reported in your browser are fixed first, then see whether this issue re-occurs. Failing that, I blame either a server configuration issue at Google, or a server configuration issue on our own servers :)

Mechanize

Answer 3

Are you using any sniffer tool? I am getting this error when I use Fiddler2 to check network communication. Try without the tool if you running it.

Pavkovic