XMLHttpRequest header No header "Access-Control-Allow-Origin" is present on the requested resource

Question

So, there are several questions about StackOverflow addressed to this error, but from 10-15 I checked, I could not find a solution to my exact problem.

I am running an Angular application (port 9000) and a Rails application (port 3000) on a remote server. The Angular application sends requests to the rails application through an email request.

When the request is made, the Javascript console displays this error message:

XMLHttpRequest cannot load http://0.0.0.0:3000/api/query. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.241.16.159:9000' is therefore not allowed access. 

From what I read, I need to change something in my Rails application so that it can accept connections from other servers (which seems strange because both applications are running on the same ec2 instance).

I tried to add a string like

  skip_before_filter :verify_authenticity_token 

for my controller in rails, but this does not seem to have an effect.

How can I solve this error?

Answer 1

In application / controllers / application_controller.rb:

 before_filter :add_allow_credentials_headers def add_allow_credentials_headers # https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#section_5 # # Because we want our front-end to send cookies to allow the API to be authenticated # (using 'withCredentials' in the XMLHttpRequest), we need to add some headers so # the browser will not reject the response response.headers['Access-Control-Allow-Origin'] = request.headers['Origin'] || '*' response.headers['Access-Control-Allow-Credentials'] = 'true' end def options head :status => 200, :'Access-Control-Allow-Headers' => 'accept, content-type' end 

In config / routes.rb:

 match '*any' => 'application#options', :via => [:options] 

Note that this answers the OPTIONS requests that you will need if your Angular frontend executes POST requests. The bit that I execute with Access-Control-Allow-Credentials is for my application, so cookies are sent from the interface.

I highly recommend you read the docs in this mozilla link in my code above. It has a very detailed explanation of CORS. You may find that the code above is too permissive for your purposes.

Answer 2

If you have not read about this yet, let me give you some idea of ​​what the problem is ...

You have a problem with the CORS policy of your applications

-

CORS (Corss Origin Resource Sharing)

When accessing the endpoint on another server with XHR ( HTTP HTTP REQUEST ), your application (although I'm not sure how) will default to DENY access to the requesting resource.

The reason this happens is to ensure that only certain data / resources are available through XHR, and that is why it is used mainly for APIs.

-

rack CORS

In any case, you need to allow access to your Java application inside your Rails application, which I personally would recommend using the rack-CORS gem

 #Gemfile gem 'rack-cors' #config/application.rb config.middleware.use Rack::Cors do allow do origins '*' resource 'api/jquery', :headers => :any, :methods => [:get, :post] end end 

This will allow you to "resolve" requests from your different applications, fixing the problem for you.