Menu
I am trying to get some AJAX working between two subdomains.
rails.mydomain.com and mydomain.com
In apache, in /etc/apache2/sites-available/ I have my rails.mydomain.com file:
<VirtualHost *:80>
Header add Access-Control-Allow-Origin "http://www.mydomain.com"
Header add Access-Control-Allow-Origin "http://www.dev-mydomain.com"
</VirtualHost>
However, whenever i try to do a simple ajax test request from http://www.dev-mydomain.com, in Chrome I get: "XMLHttpRequest cannot load http://rails.mydomain.com/directory. Origin http://www.dev-mydomain.com is not allowed by Access-Control-Allow-Origin."
Anyone know what I am missing?
264
The CORS mechanism works by adding HTTP headers to cross-domain HTTP requests and responses. These headers indicate the origin of the request and the server must indicate via headers in the response whether it will serve resources to this origin. This exchange of headers is what makes CORS a secure mechanism.
This error occurs when a script on your website/web app attempts to make a request to a resource that isn't configured to accept requests coming from code that doesn't come from the same (sub)domain, thus violating the Same-Origin policy.
Cross-Origin Resource Sharing (CORS) is a mechanism or a protocol that allows devices on one domain to access resources residing on other domains. Generally, for security reasons, browsers forbid requests that come in from cross-domain sources.
As Dahazer's link points out, the best bet is set a single Access-Control-Allow-Origin header. It's definitely not appropriate for production, but you could just echo back the Origin header whilst your in dev mode.
If you still have a problem, it's likely you're not setting quite enough CORS headers in the response. In my experience of doing cross domain ajax in chrome, (not using jquery mind), I've also needed to set the following header:
Access-Control-Allow-Headers : X-Requested-With,Content-Type
Given I was using HTTP methods other than POST and GET it was also necessary for me to set
Access-Control-Allow-Methods : GET,PUT,POST,DELETE
However, above all I'd recommend reading the html5 CORS tutorial, particularly the CORS on the server section. It should give you a good idea of the different ways to configure CORS, be it on the server or the client ( in your case jquery's ajax config options), based on your specific use case.
79
I had this issue recently. I had set Access-Control-Allow-Origin to * in Apache. However, Chrome was still blocking my cross-domain requests, while it worked fine in Firefox.
The solution that worked for me was to add a Access-Control-Allow-Methods header with value OPTIONS, GET, POST. Posting this here, in case anybody has the same issue in future and none of the other solutions work.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
