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 issue when ported the code from slippymap to my application in order to use Local tiles from the server I set.
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 in Chrome and the Local layer is working in IE 7,8,9 too. The problem is only with FF and I suspected OpenLayers. The Mapnik layer is working and showing tiles on all browsers. Using HTML5 by the way.
After digging for a while I found this article that describes requesting resources from a different domain. There is a tag that allows using resources from different domain as in the case OpenLayers use images from my tile server.
Solving this issue after adding a “Access-Control-Allow-Origin” header in the response. Note you have to have mod_headers enabled in your configuration. Put that setting in <Directory>, <Location> or .htaccess file:
Header set Access-Control-Allow-Origin *