CORS enabled in Apache, but AJAX not working (chrome says origin not allowed)

Question

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?

Check out [Access-Control-Allow-Origin multiple origin domains](http://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains) — Maxim Krizhanovsky, Aug 27 '12 at 14:28
Ok, so I did see that posting before, but i followed the response about doing two "Header add" statements. I removed the second add statement, and just have one Header set and it works, however, i will eventually need to have two origins... should i just do two set statements, or which solution from that post is the best method — Joel Grannas, Aug 27 '12 at 15:20
yup, it craps out with more than one setting. google needs to fix this asap. didn't they invent ajax in the first place? — , Dec 09 '12 at 19:21

score 3 · Answer 1 · answered Dec 25 '12 at 11:03

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.

onurozgurozkan · Answer 2 · 2014-02-06T15:54:59.220

2

Could you try this please?

To Gemfile

gem "rack-cors", "~> 0.2.7"

To config/application.rb

config.middleware.use Rack::Cors do |requests|
  requests.allow do |allow|
    allow.origins '*'
    allow.resource '*', headers: :any, methods: [:get, :post, :put, :delete, :options]
  end
end

Don't forget the restart server. Then it should be work.

edited Feb 06 '14 at 15:54

answered Dec 24 '12 at 23:16

onurozgurozkan

1,553
1
20
28

1

Is this not making the server less secure. – mindmyweb Jan 11 '16 at 14:08

score 2 · Answer 3 · answered Dec 26 '12 at 13:00

2

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.

answered Dec 26 '12 at 13:00

asleepysamurai

1,322
1
12
23

would be helpful if you described *where* you put Access-Control-Allow-Methods. – barrypicker Jan 06 '19 at 23:07
It should be in the response headers of the response that your server returns for that specific CORS request. – asleepysamurai Jan 07 '19 at 07:18

score 0 · Answer 4 · answered Sep 10 '12 at 12:02

0

I have used rack-cors to some success, pretty simple to add when doing cross origin ajax...

answered Sep 10 '12 at 12:02

stuartc

2,204
2
24
31

score 0 · Answer 5 · edited Oct 17 '14 at 17:16

The problem could be in 4 different places here. Let's start with your <virthualhost definition. First, there are a few modules and config settings you need to have to even allow your vhost definition to implement these settings.

Ensure mod_headers is enabled
Ensure your primary apache config file has an AllowOverride setting that allows your vhosts to override your default CORS settings

After you've done both of those, you can use the Access-Control-Allow-Origin setting, provided that you also use a DocumentRoot directive

<VirtualHost *:80>
    DocumentRoot /server/path/to/site/root
    Header add Access-Control-Allow-Origin "mydomain.com"
    Header add Access-Control-Allow-Origin "dev-mydomain.com"
    Header set Access-Control-Allow-Methods "GET,POST,PUT,OPTIONS"
</VirtualHost>

CORS enabled in Apache, but AJAX not working (chrome says origin not allowed)

5 Answers5