Rectangle 27 147

This is a known bug with jQuery. The jQuery team has "no plans to support this in core and is better suited as a plugin." (See this comment). IE does not use the XMLHttpRequest, but an alternative object named XDomainRequest.

EDIT The function $.ajaxTransport registers a transporter factory. A transporter is used internally by $.ajax to perform requests. Therefore, I assume you should be able to call $.ajax as usual. Information on transporters and extending $.ajax can be found here.

Also, a perhaps better version of this plugin can be found here.

  • The object XDomainRequest was introduced from IE8 and will not work in versions below.

Requests must be targeted to the same scheme as the hosting page

The "better version" of the plugin is innate; I just included it in my page and it automagically fixed my $.ajax calls :) Assuming, of course, that you have all the necessary headers in place.

To add to dennisg answer, xdr.js has a bug - ajaxTransport callback will not be called as is. I had to change it in accordance with stackoverflow.com/questions/12481560/ (added "+*" as a first argument of ajaxTransport call).

jQuery.XDomainRequest.js makes sure that the current page and remote page are either both http or https. Does this mean that you cannot make a call to an https API from an http page?

It's worth noting that the code that was linked to on moonscripts github repo is an old version that doesn't work. Be sure to get the latest version at: raw.github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest/

@Aaron, adding on to @HariKaramSingh's comment: changing protocols (http to https), domains (google.com to bing.com), subdomains (mail.google.com to maps.google.com), or protocols (google.com:80 - the default port to google.com:8080) will all trigger a "cross domain" request. Basically everything before the first / in your URL need to be identical.

internet explorer 9 - IE9 jQuery AJAX with CORS returns "Access is den...

jquery internet-explorer-9 cross-domain jsonp cors
Rectangle 27 147

This is a known bug with jQuery. The jQuery team has "no plans to support this in core and is better suited as a plugin." (See this comment). IE does not use the XMLHttpRequest, but an alternative object named XDomainRequest.

EDIT The function $.ajaxTransport registers a transporter factory. A transporter is used internally by $.ajax to perform requests. Therefore, I assume you should be able to call $.ajax as usual. Information on transporters and extending $.ajax can be found here.

Also, a perhaps better version of this plugin can be found here.

  • The object XDomainRequest was introduced from IE8 and will not work in versions below.

Requests must be targeted to the same scheme as the hosting page

The "better version" of the plugin is innate; I just included it in my page and it automagically fixed my $.ajax calls :) Assuming, of course, that you have all the necessary headers in place.

To add to dennisg answer, xdr.js has a bug - ajaxTransport callback will not be called as is. I had to change it in accordance with stackoverflow.com/questions/12481560/ (added "+*" as a first argument of ajaxTransport call).

jQuery.XDomainRequest.js makes sure that the current page and remote page are either both http or https. Does this mean that you cannot make a call to an https API from an http page?

It's worth noting that the code that was linked to on moonscripts github repo is an old version that doesn't work. Be sure to get the latest version at: raw.github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest/

@Aaron, adding on to @HariKaramSingh's comment: changing protocols (http to https), domains (google.com to bing.com), subdomains (mail.google.com to maps.google.com), or protocols (google.com:80 - the default port to google.com:8080) will all trigger a "cross domain" request. Basically everything before the first / in your URL need to be identical.

internet explorer 9 - IE9 jQuery AJAX with CORS returns "Access is den...

jquery internet-explorer-9 cross-domain jsonp cors
Rectangle 27 36

Internet Explorer raises this error as part of its security zones feature. Using default security settings, an "Access is Denied" error is raised when attempting to access a resource in the "Local intranet" zone from an origin in the "Internet" zone.

If you were writing your Ajax code manually, Internet Explorer would raise an error when you try to open the resource. For example:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/', true); // This line will trigger an error
xhr.send();

You can work around this error by adding the origin site to the "Trusted sites" security zone. You can test this by adding "http://client.cors-api.appspot.com" to your "Trusted sites" zone and using this test page at test-cors.org with your localhost site as the Remote URL.

@narc88 you should mark this as the accepted answer then :)

But what if your JS is being run by someone else and you can't change their IE security settings? This solves the problem for one computer....but not for the deployed code.

@theUtherSide If your code is being deployed to localhost, then you're already going to be deploying/installing something on your user's workstation. If you have access to their workstation, you can change their IE security settings. If your user is deploying/installing manually, you can include the IE security settings change in your installation instructions.

@oobug That's exactly my point --this answer only applies if you have access to change the IE security settings. That's fine if you have some internal app, but it does not apply to JS code on the wild wild web.

xmlhttprequest - Access denied in IE 10 and 11 when ajax target is loc...

ajax xmlhttprequest cors internet-explorer-10 internet-explorer-11
Rectangle 27 14

In addition to the trusted site requirement I found that the problem was not fixed until I used the same protocol for the request as my origin, e.g. my test site was hosted on a https but failed with any destination using http (without the s).

This only applies to IE, Chrome just politely logs a warning in the debug console and doesn't fail.

xmlhttprequest - Access denied in IE 10 and 11 when ajax target is loc...

ajax xmlhttprequest cors internet-explorer-10 internet-explorer-11
Rectangle 27 3

In our case, on a previous project we had changed which SSL protocols were allowed by IE to us. Ajax requests were failing because IE was not allowed to negotiate the SSL handshakes based on the custom configuration.

Solution was to open up Internet Options, choose the Advanced tab, and then click the "Restore Advanced Settings" button. After that the Ajax requests worked fine.

Hopefully this saves someone else the 6 hours or so I spent on this!

didn't help in IE10

After restore setting I applied and close the browser but I didn't work for me. Is there any step missing?

ajax - IE https CORS XHR request fails with Script7002: XMLHttpRequest...

ajax internet-explorer https xmlhttprequest cors
Rectangle 27 3

If you are attempting to make cross-origin ajax requests in IE9, you'll need to use XDomainRequest instead of XMLHttpRequest. There is a jQuery plug-in that wraps XDR. You should be aware that there are some notable limitations of XDR.

xmlhttprequest - Access denied in IE 10 and 11 when ajax target is loc...

ajax xmlhttprequest cors internet-explorer-10 internet-explorer-11
Rectangle 27 10

You shouldn't be setting Access-Control-Allow-Origin as a request header, that's a response header.

You can see from the response what request headers the server will accept:

Access-Control-Allow-Headers:Origin,Content-Type,Accept

And the error message tells you that:

Request header field Access-Control-Allow-Origin is not allowed

It looks like it might not accept X-Requested-With either.

thanks for clarifying,your suggestion worked,removing both the Access-Control-Allow-Origin and X-Requested-With made a world of difference.

javascript - Make CORS Ajax requests using XMLHttpRequest - Stack Over...

javascript jquery ajax xmlhttprequest cors
Rectangle 27 7

It got resolved. Noticed that the browser makes this cross domain calls with Authentication in 2 steps - a preflight call before the actual request. The nature of this preflight call is different in IE and [Chrome + Firefox]. IE makes a HTTP GET preflight call and it comes back with 401 and then it sends the authentication details in the actual request. But, Chrome and Firefox take much safer approach by making a HTTP OPTIONS call to check what all things the web server supports as CORS (Which domains are allowed / whether supports GET / POST etc) and the next call goes with the actual HTTP GET request with authentication.

Unfortunately, the API side was coded in such way that it was authenticating each Http call. Thats why even the HTTP OPTIONS call was also coming back with 401. [chrome + Firefox] were throwing exception right after the preflight call.

In the API side, modified the code not to return 401 in case of OPTIONS calls and it started working.

jquery - XMLHttpRequest based CORS call with Basic Auth fails in Firef...

jquery xmlhttprequest
Rectangle 27 18

Internet Explorer's definition of the "same origin" differs to the other browsers. See the IE Exceptions section of the MDN documentation on the same-origin policy:

  • Trust Zones: if both domains are in highly trusted zone e.g, corporate domains, then the same origin limitations are not applied
  • Port: IE doesn't include port into Same Origin components, therefore http://company.com:81/index.html and http://company.com/index.html are considered from same origin and no restrictions are applied.

Therefore if your cross-origin request occurs across different ports, or within one of IE's trusted zones, IE will not treat the request as cross-origin and will see no need to add the Origin: header.

The one problem with your source is that it doesn't come from a Microsoft site. My findings on a Microsoft associated site said it was a bug that will possibly be "fixed". Strange. It might be that your source reflects subject views as someone has "concluded" that is must be in a particular way?

I was also a little confused about the words used by the Microsoft rep in your link. They referred to a "fix", but they also described the problem as "a long-standing interoperability difference with other browsers where we treat different ports as same-origin whereas other browsers treat them as cross-origin." The MDN documentation points out that this "interoperability difference" also applies to sites within trusted zones, which was the cause of the behaviour I experienced.

They're referring to a 'fix' because IE currently doesn't adhere to the RFC6454 spec which says that the port (whether specified explicitly or implicitly) does form part of the Origin identity. The other problem that Microsoft has is that for a long time, Microsoft has considered Origins differently (i.e. not including ports). So if they 'fix' the behaviour to adhere to the spec, they'll break the code of anybody expecting the previous behaviour. (And then somebody will raise a bug about that... It's an age-old debate.)

xmlhttprequest - Internet Explorer 11 does not add the Origin header o...

internet-explorer xmlhttprequest cross-domain cors
Rectangle 27 18

Internet Explorer's definition of the "same origin" differs to the other browsers. See the IE Exceptions section of the MDN documentation on the same-origin policy:

  • Trust Zones: if both domains are in highly trusted zone e.g, corporate domains, then the same origin limitations are not applied
  • Port: IE doesn't include port into Same Origin components, therefore http://company.com:81/index.html and http://company.com/index.html are considered from same origin and no restrictions are applied.

Therefore if your cross-origin request occurs across different ports, or within one of IE's trusted zones, IE will not treat the request as cross-origin and will see no need to add the Origin: header.

The one problem with your source is that it doesn't come from a Microsoft site. My findings on a Microsoft associated site said it was a bug that will possibly be "fixed". Strange. It might be that your source reflects subject views as someone has "concluded" that is must be in a particular way?

I was also a little confused about the words used by the Microsoft rep in your link. They referred to a "fix", but they also described the problem as "a long-standing interoperability difference with other browsers where we treat different ports as same-origin whereas other browsers treat them as cross-origin." The MDN documentation points out that this "interoperability difference" also applies to sites within trusted zones, which was the cause of the behaviour I experienced.

They're referring to a 'fix' because IE currently doesn't adhere to the RFC6454 spec which says that the port (whether specified explicitly or implicitly) does form part of the Origin identity. The other problem that Microsoft has is that for a long time, Microsoft has considered Origins differently (i.e. not including ports). So if they 'fix' the behaviour to adhere to the spec, they'll break the code of anybody expecting the previous behaviour. (And then somebody will raise a bug about that... It's an age-old debate.)

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

xmlhttprequest - Internet Explorer 11 does not add the Origin header o...

internet-explorer xmlhttprequest cross-domain cors
Rectangle 27 7

Below is for AJAX calls, not image or video canvas resources

Sorry, I haven't dealt with CORS images before and thought this question was about an AJAX request.

According to Mozilla Developer Network you need to set image.crossOrigin to anonymous or use-credentials. Also, according to that page today, these attributes are not supported in IE, Safari, or Opera. This test was made to demonstrate that IE9 did not support it and it seems that same test still fails in IE10, so even if Safari and Opera have added support since the MDN article was written, it is quite possible that IE10 still lacks support.

The only tip I can give you is that in general, allow-credentials is incompatible with a wildcard allow-origin. Either drop the allow-credentials or echo the request Origin in the allow-origin.

Early versions of IE10 were known to have AJAX bugs,

so it could be another browser bug. Then again, CORS is deceptively tricky to get right. I recommend the following steps to debug CORS problems.

  • Point the browser at http://test-cors.appspot.com/#technical to get a compatibility report. If anything fails then you have a bug or lack of support for CORS in the browser.
  • If everything passes, use the CORS headers the test is sending as a starting point to get your CORS request working. Then change one header at a time and retest until you get the headers the way you want for your application or you run into a failure you cannot explain or work around.
  • If necessary, post a question about that one tiny change that breaks the CORS request, posting both the working "before" and the failing "after". It always helps if you can include a runnable example.

The complete code for the CORS test client and server (Python script for Google App Engine) is available at https://github.com/rapportive-oss/cors-test to get you started.

Thanks - unfortunately still no luck. 1 reports all ok, however I have all of the headers specified in each of the responses from the test, and I still get the security error. I'm not convinced that this test is really testing 'everything' though - e.g. 1) None of the response headers use the wildcard access-control-allow-origin setting 2) It's not testing drawImage or getImageData at all, and 3) It's not testing the image.crossOrigin = "Anonymous" feature.

BTW - I've found a JSFiddle that shows the problem perfectly (jsfiddle.net/WLTqG/29) - see my updated question for the background.

Thanks for the extra tips. Re the incompatibility - it was my understanding that access-control-allow-credentials was necessary to use 'image.crossOrigin', so we probably wont be able to drop that. As you say, dynamic allow-origin headers may be an option, but TBH I haven't seen any problems using both of these.

access-control-allow-credentials is not needed if you set image.crossOrigin to anonymous. It is only needed when it is set to use-credentials. With AJAX calls I have seen the allow-origin wildcard rejected consistently when use-credentials is set, which is why the CORS AJAX tester does not use wildcard origins. I guess we're seeing the rules are somewhat different for Canvas tainting, but if you do not need credentials to access the image then you can remove the allow-credentials header and rule out that as a possible source of the problem.

Thanks for the clarification. I've now removed the access-control-allow-credentials. (Wasn't causing the IE problem though unfortunately)

javascript - IE10 and Cross-origin resource sharing (CORS) issues with...

javascript html5 internet-explorer cors
Rectangle 27 7

Below is for AJAX calls, not image or video canvas resources

Sorry, I haven't dealt with CORS images before and thought this question was about an AJAX request.

According to Mozilla Developer Network you need to set image.crossOrigin to anonymous or use-credentials. Also, according to that page today, these attributes are not supported in IE, Safari, or Opera. This test was made to demonstrate that IE9 did not support it and it seems that same test still fails in IE10, so even if Safari and Opera have added support since the MDN article was written, it is quite possible that IE10 still lacks support.

The only tip I can give you is that in general, allow-credentials is incompatible with a wildcard allow-origin. Either drop the allow-credentials or echo the request Origin in the allow-origin.

Early versions of IE10 were known to have AJAX bugs,

so it could be another browser bug. Then again, CORS is deceptively tricky to get right. I recommend the following steps to debug CORS problems.

  • Point the browser at http://test-cors.appspot.com/#technical to get a compatibility report. If anything fails then you have a bug or lack of support for CORS in the browser.
  • If everything passes, use the CORS headers the test is sending as a starting point to get your CORS request working. Then change one header at a time and retest until you get the headers the way you want for your application or you run into a failure you cannot explain or work around.
  • If necessary, post a question about that one tiny change that breaks the CORS request, posting both the working "before" and the failing "after". It always helps if you can include a runnable example.

The complete code for the CORS test client and server (Python script for Google App Engine) is available at https://github.com/rapportive-oss/cors-test to get you started.

Thanks - unfortunately still no luck. 1 reports all ok, however I have all of the headers specified in each of the responses from the test, and I still get the security error. I'm not convinced that this test is really testing 'everything' though - e.g. 1) None of the response headers use the wildcard access-control-allow-origin setting 2) It's not testing drawImage or getImageData at all, and 3) It's not testing the image.crossOrigin = "Anonymous" feature.

BTW - I've found a JSFiddle that shows the problem perfectly (jsfiddle.net/WLTqG/29) - see my updated question for the background.

Thanks for the extra tips. Re the incompatibility - it was my understanding that access-control-allow-credentials was necessary to use 'image.crossOrigin', so we probably wont be able to drop that. As you say, dynamic allow-origin headers may be an option, but TBH I haven't seen any problems using both of these.

access-control-allow-credentials is not needed if you set image.crossOrigin to anonymous. It is only needed when it is set to use-credentials. With AJAX calls I have seen the allow-origin wildcard rejected consistently when use-credentials is set, which is why the CORS AJAX tester does not use wildcard origins. I guess we're seeing the rules are somewhat different for Canvas tainting, but if you do not need credentials to access the image then you can remove the allow-credentials header and rule out that as a possible source of the problem.

Thanks for the clarification. I've now removed the access-control-allow-credentials. (Wasn't causing the IE problem though unfortunately)

javascript - IE10 and Cross-origin resource sharing (CORS) issues with...

javascript html5 internet-explorer cors
Rectangle 27 2

This article does a good job of explaining the problem. jQuery implements ajax calls using the XMLHttpRequest object which is not supported in IE9. You have to force it to use XDomainRequest instead.

OP specifically said it's IE10/11. XDomainRequest is only for IE9 and below.

User has updated his question - previously he did not indicate IE version so I assumed it was 9.

xmlhttprequest - Access denied in IE 10 and 11 when ajax target is loc...

ajax xmlhttprequest cors internet-explorer-10 internet-explorer-11
Rectangle 27 23

Unfortunately, IE10 still remains the only popular browser that doesn't support CORS for image drawn to Canvas even when CORS headers are properly set. But there is workaround for that via XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response), img = new Image();
    img.onload = function () {
        // here you can use img for drawing to canvas and handling
        // ...
        // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas)
        URL.revokeObjectURL(url);
    };
    img.src = url;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();

Very interesting - I'll give this a try, thank you.

Works great. It took me over 2 hours to get to the same solution. I just wish I had found it earlier.

This worked great for us in every browser we cared about except Android Stock Browser. Tested in Android Chrome, iOS Safari, IE10+, Chrome and FF. Very annoying!

Is there a way to test if the "toDataURL" throws a security error, then if so use this method?

@MrHunter Hmm, didn't try, but you could try regular try-catch around toDataURL and see if that works.

javascript - IE10 and Cross-origin resource sharing (CORS) issues with...

javascript html5 internet-explorer cors
Rectangle 27 22

Unfortunately, IE10 still remains the only popular browser that doesn't support CORS for image drawn to Canvas even when CORS headers are properly set. But there is workaround for that via XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response), img = new Image();
    img.onload = function () {
        // here you can use img for drawing to canvas and handling
        // ...
        // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas)
        URL.revokeObjectURL(url);
    };
    img.src = url;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();

Very interesting - I'll give this a try, thank you.

Works great. It took me over 2 hours to get to the same solution. I just wish I had found it earlier.

This worked great for us in every browser we cared about except Android Stock Browser. Tested in Android Chrome, iOS Safari, IE10+, Chrome and FF. Very annoying!

Is there a way to test if the "toDataURL" throws a security error, then if so use this method?

@MrHunter Hmm, didn't try, but you could try regular try-catch around toDataURL and see if that works.

javascript - IE10 and Cross-origin resource sharing (CORS) issues with...

javascript html5 internet-explorer cors
Rectangle 27 27

No, there is no way to tell the difference, according the W3C Spec.

Here's how the CORS specification specifies the simple cross-origin request procedure:

Apply the make a request steps and observe the request rules below while making the request.

If there is a network error: In case of DNS errors, TLS negotiation failure, or other type of network errors, apply the network error steps. Do not request any kind of end user interaction...

If it returns fail, apply the network error steps

In the case of either a failed network connection or a failed CORS exchange, the network error steps are applied, so there is literally no way to distinguish between the two cases.

Why? One benefit is that it prevents an attacker from inspecting the network topology of a LAN. For example, a malicious Web page script could find the IP address of your router by requesting its HTTP interface and therefore learn a few things about your network topology (e.g., how big your private IP block is, /8 or /16). Since your router doesn't (or shouldn't) send CORS headers, the script learns absolutely nothing.

Thanks for the answer. Seems like a flaw in the CORS spec. to me. Not what I wanted to hear but thanks anyway :-)

The Chrome debug log shows a very specific error when a CORS request fails. Can we use that / use what it's using?

@mgold No. The browser knows exactly what went wrong, and it tells the user who is physically sitting in front of the computer screen. The browser does not tell the script, which potentially came from a strange website and was written by an unknown person to achieve an unknown (potentially malicious) purpose.

@Michael Correct; network failure and CORS failure (as well as all subtypes of network and CORS failures) are deliberately indistinguishable to scripts reading the XHR API. (The user can look at the console.) You could experimentally try to determine the issue. Can you hit a public, high-availability CORS-enabled resource? It's not a network outage. Can you hit a CORS-public resource on your own domain (which maybe you set up exactly for this test)? It's not a DNS resolution error. Can you load an image from your domain over HTTP but not HTTPS? There might be a TLS negotiation issue.

ajax - How to Detect Cross Origin (CORS) Error vs. Other Types of Erro...

javascript ajax xmlhttprequest cors
Rectangle 27 3

Maybe in case it helps anyone... one other way to handle difference between cors and network error... can work with chrome or firefox... (not perfect solution though)

var external = 'your url';

if (window.fetch) {
    // must be chrome or firefox which have native fetch
    fetch(external, {'mode':'no-cors'})
        .then(function () {
            // external is reachable; but failed due to cors
            // fetch will pass though if it's a cors error
        })
        .catch(function () {
            // external is _not_ reachable
        });
} else {
    // must be non-updated safari or older IE...
    // I don't know how to find error type in this case
}

I tested with fetching https://www.google.com (existing CORS target) versus https://www.google.invalid (nonexistent target) and couldn't see any difference in script-visible behavior. What case is this meant to cover? (Or has the behavior changed since Nov 2016? The spec does change sometimes, especial over matters of CORS sercurity.)

ajax - How to Detect Cross Origin (CORS) Error vs. Other Types of Erro...

javascript ajax xmlhttprequest cors
Rectangle 27 11

The issue was that this was a CORS request and according to the CORS Spec only the following "Simple Response Headers" are exposed:

To expose additional headers you need to include them in the Access-Control-Expose-Headers header e.g.:

Access-Control-Expose-Headers: location

Once this change was made, the Location header was available to the XmlHttpRequest object via getResponseHeader("Location").

For normal (non-CORS) requests, this is not an issue.

Missing Location header on jQuery AJAX POST - Stack Overflow

jquery ajax xmlhttprequest
Rectangle 27 12

If you're using chrome, get "Allow-Control-Allow-Origin" plugin. This will let you ignore all CORS errors.

It works on mobile because ionic has a cordova plugin "cordova-plugin-whitelist". In your "config.xml" you'll see the line by default, that means your app can access any URL.

Unfortunately when testing through the browser the cordova plugin is not active.

angularjs - XMLHttpRequest cannot load and Response for preflight has ...

angularjs ajax ionic-framework
Rectangle 27 63

The following code worked correctly in Chrome, Firefox and IE10, but failed in IE9. I simply included the script and it now automagically works in IE9. (And probably 8, but I haven't tested it.)

var displayTweets = function () {
    $.ajax({
        cache: false,
        type: 'GET',
        crossDomain: true,
        url: Site.config().apiRoot + '/Api/GetTwitterFeed',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            for (var tweet in data) {
                displayTweet(data[tweet]);
            }
        }
    });
};

The jQuery.XDomainRequest.js plugin was exactly what I needed! I couldn't get the iexhr.js plugin to work for requests behind HTTP Basic Authentication, but XDomainRequest worked like a charm!

@NicholasDecker Site.config().apiRoot was just implementation specific code to get the root URL of the API, nothing universal or fancy. Glad it helped!

Same problem, resolved the same way. Thanks @Moonscript

@cracker Are you only having issues with POST? Double check the script is loading after jQuery and your call matches MoonScript's documentation.

internet explorer 9 - IE9 jQuery AJAX with CORS returns "Access is den...

jquery internet-explorer-9 cross-domain jsonp cors