XMLHtt prequest否“访问控制允许来源”标头的请求的资源present [英] XMLHttpRequest No 'Access-Control-Allow-Origin' header is present on the requested resource

问题描述

所以有StackOverflow上的问题解决这个错误了一把，但我查了10-15，我无法找到一个解决我确切的问题。

So there are a handful of questions on StackOverflow addressing this error, but of the 10-15 I checked, I could not find a solution to my exact problem.

我运行的角度应用程序（端口9000）和远程服务器上的Rails应用程序（3000端口）。角应用通过POST请求发送请求到Rails应用程序。

I am running an Angular app (port 9000) and a Rails app (port 3000) on a remote server. The angular app sends requests to the rails app via a post request.

当一个请求时，JavaScript的控制台显示此错误消息：

When a request is made, the Javascript console shows 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. 

从我读过，我需要改变我的Rails应用程序的东西，以便它可以接受来自其他服务器的连接（因为这两个应用都在同一个EC2实例中运行它似乎很奇怪）。

From what I've read, I need to change something about my Rails app so that it can accept connection from other servers (which seems odd because both apps are running on the same ec2 instance).

我试着加入像

  skip_before_filter :verify_authenticity_token

我在轨控制，但是这似乎没有任何效果。

to my controller in rails, but this seems to have no effect.

我怎样才能解决这个问题？

How can I resolve this error?

推荐答案

在应用程序/控制器/ application_controller.rb：

In app/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

在配置/ routes.rb中：

In config/routes.rb:

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

请注意，这是应对这要是你的角前端正在执行POST请求您将需要OPTIONS请求。我与做位存取控制允许的凭据是我的应用程序，所以cookie是从前端发送。

Note, this is responding to OPTIONS requests which you will need if your Angular front-end is performing POST requests. The bit I am doing with Access-Control-Allow-Credentials is for my app so cookies are sent from the front-end.

我强烈建议您阅读在Mozilla浏览器链接的文档在我的code以上。它有CORS非常详尽的解释。您可能会发现，上面的code是你的目的过于宽松。

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

这篇关于XMLHtt prequest否“访问控制允许来源”标头的请求的资源present的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！