locked
403 Forbidden, No 'Access-Control-Allow-Origin' header RRS feed

  • Question

  • Attempting to load the AJAX V7 in Chrome is currently failing with the following errors:

    • Failed to load resource: the server responded with a status of 403 (Forbidden) 'http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20140121124250.64/css/en/veapiBingTheme.css'
    • Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '{myserver}' is therefore not allowed access. 'http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20140121124250.64/css/en/veapiBingTheme.css'
    • XMLHttpRequest cannot load 'http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20140121124250.64/css/en/veapiBingTheme.css'. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '{myserver}' is therefore not allowed access.

    It doesn't look like Chrome likes the the cross-domain request for the theme stylesheet (it is also apparently a fan of repetition). This isn't an issue on Firefox or IE, and the control works perfect on them.

    Any ideas as to what might be causing this, or workarounds?

    Thursday, February 27, 2014 2:33 AM

Answers

  • Apparently this error can happen when your specified div doesn't exist yet. Perhaps it didn't happen on Firefox or IE because they rendered faster in this case. Who would of known...

    Well, I just set up an interval to check for the div first before executing the previous code and it works great now.

    • Marked as answer by Sam Trimble Thursday, February 27, 2014 7:37 AM
    Thursday, February 27, 2014 7:37 AM

All replies

  • For reference, here's what I'm using to init the control:

    $(document).ready(function() {
        Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', {
            callback: function() {
                var options = {
                    credentials: "{myapikey}",
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    theme: new Microsoft.Maps.Themes.BingTheme(),
                    disableBirdseye: true,
                    enableClickableLogo: true,
                    enableSearchLogo: false,
                    showMapTypeSelector: false,
                    showBreadcrumb: false,
                    disableTouchInput: true,
                    center: new Microsoft.Maps.Location(30, 10),
                    zoom: 2
                },
                bMap = new Microsoft.Maps.Map(document.getElementById("{mydivid}"), options);
            }
        });
    });

    Thursday, February 27, 2014 2:53 AM
  • Apparently this error can happen when your specified div doesn't exist yet. Perhaps it didn't happen on Firefox or IE because they rendered faster in this case. Who would of known...

    Well, I just set up an interval to check for the div first before executing the previous code and it works great now.

    • Marked as answer by Sam Trimble Thursday, February 27, 2014 7:37 AM
    Thursday, February 27, 2014 7:37 AM