Map tiles do not show (all pink) in Firefox using OpenLayers and own OSM server

Question

I have set my own OSM server for providing map tiles to use in an application. For the application I use OpenLayers and came to an strange issue when ported the code from slippymap to my application. Basically I use the same code, and for local tiles I set up the url of my tile server.

The issue is that when switching to the Local layer I only see the pink layer of the map, but the src attribute of the image tag loads the actual tile. I tried with Firebug to remove the pink layer, but behind it there is no image there! Coping the url from src attribute of the img tag opens the tile as an image.

Tried this to Chrome and the Local layer is working, in IE 7,8,9 too. The problem is only with FF and I suspect something with OpenLayers, but not sure what. The Mapnik layer is working and showing tiles on all browsers. Using HTML5 by the way.

Any ideas or hints are appreciated.

Answer 1

There's another solution that doesn't require adding CORS headers server-side. You need to provide a "tileOptions" option to the layer config, like so:

var layer = new OpenLayers.Layer.OSM("layer name", [urls], {
    "tileOptions": {
        "crossOriginKeyword": null
    }
});

The OpenLayers docs for Layer.OSM and Tile.Image tell you how to do this, but there's no mention of the fact that the default can cause issues in Firefox.

Answer 2

Hm, I almost guess it right. It was an Apache header setting that enables cross domain request for the resources provided. Here is more info for the curious https://developer.mozilla.org/en/http_access_control

This is the header setting, Include it in <Directory>, <Location> or .htaccess file and check that you have mod_headers enabled.

Header set Access-Control-Allow-Origin *