enabling CORS on apache

Question

I am trying to enable CORS but it is not workign for me. i am runnign centos 6.5 with apache. aplication wordpress. i have tried the following.

• set header in template file

• set header in .htaccess http://enable-cors.org/server_apache.html

  Header set Access-Control-Allow-Origin "*"

restarted apache. still i get error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://gateway.spectrumasa.com/dev/mcmap/test-geosml3.kmz. This can be fixed by moving the resource to the same domain or enabling CORS.

I am trying to create geoxml3 kml polygon tooltip on mouseover instead of click

Below is the code i currently have on my template.

<!-- <script type="text/javascript" src="<?=get_site_url(); ?>/wp-content/themes/twentytwelve-child/js/geoxml3.js.1"></script>
<script type="text/javascript" src="<?=get_site_url(); ?>/wp-content/themes/twentytwelve-child/js/ProjectedOverlay.js"></script>-->
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<?php header('Access-Control-Allow-Origin: *');?>
<script type="text/javascript">
var geoXmlDoc = null;
var map = null;
jQuery(document).ready(function () {
var myOptions = {
        center: new google.maps.LatLng(-19.5968657,-40.7717683),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var geoXml = new geoXML3.parser({
        map: map,
        singleInfoWindow: true,
        afterParse: useTheData
    });
    geoXml.parse('https://gateway.spectrumasa.com/dev/mcmap/test-geosml3.kmz');
// alert("done init");
}
);
    function useTheData(doc) {
    // Geodata handling goes here, using JSON properties of the doc object
    geoXmlDoc = doc;
    for (var i = 0; i < doc[0].placemarks.length; i++) {
        var placemark = doc[0].placemarks[i];
        polygonMouseover(placemark.polygon,placemark.name);
        // console.log(doc[0].markers[i].title);
        jQuery('#map_text').append(doc[0].placemarks[i].name + ', ');
    }
    };
var ib = new InfoBubble({
          shadowStyle: 0,
          padding: 0,
          backgroundColor: 'white',
          borderRadius: 4,
          arrowSize: 0,
          borderWidth: 1,
          borderColor: 'black',
          disableAutoPan: true,
          hideCloseButton: true,
          arrowPosition: 50,
          arrowStyle: 0
        });
function polygonMouseover(poly, text) {
   google.maps.event.addListener(poly,'mouseover', function(evt) {
     ib.setContent(text);
     ib.setPosition(evt.latLng);
     ib.setMap(map);
     ib.open()
   });
   google.maps.event.addListener(poly,'mouseout', function(evt) {
     ib.close()
   });
}
</script>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">



<div id="container" class="three_column_middle">
    <div id="content" role="main">
        <?php  if($post->post_parent){?>
        <div class="section_title"><?php echo get_the_title(); ?></div>     
        <?php }?>
        <div class="second-conent-container">
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php comments_template( '', true ); ?>
            <?php endwhile; // end of the loop. ?>      

            <div id="map_canvas" style="width:600px;height:500px;"></div>

    <div id="map_text"></div>   
        </div>  
    </div><!-- #content -->

</div><!-- #container -->

<?php get_sidebar('right'); ?>
</div></div><!-- #3 column container -->

<?php get_footer(); ?>

On gateway it is just a proxy lookup for public access

ProxyPassReverse /dev/mcmap http://172.16.0.29/mcmap
ProxyPass /dev/mcmap http://172.16.0.29/mcmap
ProxyPassReverse /dev/knowledgemap http://172.16.0.29/mcmap
ProxyPass /dev/knowledgemap http://172.16.0.29/mcmap

After reading http://g00se.org/2013/07/reverse-proxy-with-cors.html I have added

<LocationMatch "/dev/mcmap">
   Header add "Access-Control-Allow-Origin" "*"
   Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</LocationMatch>

Answer 1

I puted following code in my root .htaccess and work it is working, try this

<IfModule mod_headers.c>

   ##########################################################################
   # 1.) ENABLE CORS PRE-FLIGHT REQUESTS
   # e.g. PUT, DELETE, OPTIONS, ...
   # we need to set Access-Control-Allow-Headers and
   # Access-Control-Allow-Methods for allowed domain(s)
   ##########################################################################

   # first check for pre-flight headers and set as environment variables
   # e.g. header method-a is set here
   SetEnvIf ^Access-Control-Request-Method$ "method-a" METHOD_A
   SetEnvIf ^Access-Control-Request-Headers$ "^Content-Type$" HEADER_A

   # set corresponding response pre-flight headers for allowed domain(s)
   Header set Access-Control-Request-Methods "method-a" env=METHOD_A
   Header set Access-Control-Request-Headers "content-type" env=HEADER_A

   # TODO: add allowed additional pre-flight requests here...

   #########################################################################
   # 2.) ENABLE CORS *SIMPLE REQUESTS* (vs. Pre-Flight Requests from above)
   # e.g. GET, POST and HEAD requests
   # we need to set Access-Control-Allow-Origin header for allowed domain(s)
   # also note that POST requests need to match one of the following
   # Content-Type:
   # 1) application/x-www-form-urlencoded
   # 2) multipart/form-data
   # 3) text/plain
   #########################################################################


   # e.g. origin = https://host-b.local
   SetEnvIfNoCase Origin "https://host-b.local" AccessControlAllowOrigin=$0
   Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

   # generic regexp match for more flexibel use cases
   #SetEnvIfNoCase Origin "((http(s?))?://(www\.)?(host\-a|host\-b)\.local)(:\d+)?$" AccessControlAllowOrigin=$0
   #Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

   # TODO: add additional allowed simple requests here...

</IfModule>

Answer 2

The CORS policy on https://gateway.spectrumasa.com/dev/mcmap/test-geosml3.kmz is what you need updated, not on your own domain where you deliver the javascript that needs spectrumasa.com.

Maybe you could just mirror the content.

Answer 3

This seemed to have wqorked after entering

<LocationMatch "/dev/mcmap">
   Header add "Access-Control-Allow-Origin" "*"
   Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</LocationMatch>

on proxy and clearing local server cache.