XMLHttpRequest cannot load . . . No 'Access-Control-Allow-Origin' header is present on the requested resource.

Question

In Drupal, I'm trying to display the user profile in a colorbox modal. Am using the colorbox node module.

I receive the error:

XMLHttpRequest cannot load https://arizonawet.arizona.edu/colorbox/user/23?width=800&height=500. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://arizonawet.arizona.edu' is therefore not allowed access.

I know that this looks like a cross-site request and have read about the standard solution for this... which I don't think I can implement as I don't have access.

But, how can I be sure that it's a cross-site request? I can't discern two different sites.

And, what's more, there are things that I can do that make this error NOT occur. Specifically, any action that displays the profile outside of the colorbox modal, followed at any point by displaying it inside the colorbox, when everything appears to work fine.

Answer 1

You are trying to access https://arizonawet.arizona.edu/colorbox/user/23?width=800&height=500 from http://arizonawet.arizona.edu . As far as browsers are concerned these are different domains (note the http and https and thus you will run into cross domain issues. Either use JSONP, CORS or switch your site to all https or all http.