Rails 跨域ajax获取请求(CORS) [英] Rails cross domain ajax get request (CORS)

问题描述

我正在尝试在我的 Rails 应用中实现 google place api.

I'm trying to implement google places api in my rails app.

这是我在尝试使用从 ajax 请求中获取数据的函数时遇到的错误:

This is the error I'm getting when trying to use the function that is fetching the data from the ajax request:

XMLHttpRequest cannot load . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我正在使用 rack-cors gem 并且我已将此代码段添加到我的 config/application.rb 文件中:

I'm using rack-cors gem and I've added this snippet into my config/application.rb file:

config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*', :headers => :any, :methods => [:get, :post, :options]
      end
    end

这是我认为的 ajax 请求(coffeescript):

This is the ajax request from my view (coffeescript):

    $.ajax
      url: url
      dataType: "json"
      type: "GET"

我已将此部分添加到我的 application_controller

I've added this part to my application_controller

before_filter :cors_preflight_check
after_filter :cors_set_access_control_headers

def cors_set_access_control_headers
headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
headers['Access-Control-Allow-Headers'] = '*'
headers['Access-Control-Max-Age'] = "1728000"
end

def cors_preflight_check
if request.method == :options
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
  headers['Access-Control-Max-Age'] = '1728000'
  render :text => '', :content_type => 'text/plain'
end
end

这个，到我的路由文件

 match '*path' => 'application#cors_preflight_check', :via => :options

我注意到cors_preflight_check"方法不是由我的请求触发的.(当我点击视图中的某个链接时，我会发出 AJAX 请求)

I've noticed that "cors_preflight_check" method is not triggered by my request. (I make the AJAX request when I click a certain link in my view)

而且我注意到我的请求标头保持不变.

and I've noticed that my request headers remain unchanged.

(Access-Control-Allow-Origin 未添加到请求标头中)

(Access-Control-Allow-Origin is not added to request headers)

jsonp 不是一个选项，因为它不受场所 api 的支持

jsonp is not an option because it's not supported by places api

尝试了这些线程中编写的所有内容:

Tried everything that's written in these threads:

• https://github.com/cyu/rack-cors/issues/33
• 无法让 rack-cors 在 rails 应用程序中工作 (config.middleware.insert 0, Rack::Cors do)
• https://demisx.github.io/rails-api/2014/02/18/configure-accept-headers-cors.html
• POST 方法在 rack-cors rails 4 中不起作用(在应用控制器中添加 before 和 after 操作)
• 使用 Rack-cors 和 Grape 添加自定义响应标头(使用 :expose 键)

• https://github.com/cyu/rack-cors/issues/33
• Can't get rack-cors working in rails application (config.middleware.insert 0, Rack::Cors do)
• https://demisx.github.io/rails-api/2014/02/18/configure-accept-headers-cors.html
• POST Method not working in rack-cors rails 4 (adding before & after actions in the app controller)
• Add custom response header with Rack-cors and Grape (using :expose key)

推荐答案

我正在尝试在我的 Rails 应用中实现 google places api.

I'm trying to implement google places api in my rails app.

您似乎对 CORS 的作用感到困惑.如果您尝试对例如 https://maps.googleapis.com 执行 ajax 调用，唯一重要的是 CORS 标头 在 Google 的响应中发送.如果这不起作用，您可能正在尝试使用过时的 API 版本端点.

You seem confused about what CORS does. If you are trying to perform an ajax call to for example https://maps.googleapis.com the only thing that matters are the CORS headers sent in the response by Google. If this does not work you may be trying to use a outdated api version endpoint.

而是按照以下步骤操作:https://developers.google.com/maps/documentation/javascript/示例/地方搜索

Instead follow the steps on: https://developers.google.com/maps/documentation/javascript/examples/place-search

如果您希望您的应用程序能够向其他域提供数据，那么您需要提供 CORS 标头.但这不太可能是导致您出现问题的原因，除非您正在执行由单独前端使用的 Rails api 应用程序.

If you want your application to be able to provide data to other domains then you would provide CORS headers. But this is not very likely what is causing your issue unless you are doing a Rails api app which is consumed by a separate front-end.

有关 CORS 工作原理的教程，请参阅使用 CORS.

See Using CORS for a tutorial on how CORS works.

CSP(内容安全政策)另一方面允许您为跨域请求设置更宽松的规则.但在这种情况下不需要，因为 Google 为其网络服务提供了 CORS 标头.

The CSP (content security policy) on the other hand allows you to set more permissive rules for cross domain requests. But should not be needed in this case since Google provides CORS headers for their web services.

这篇关于Rails 跨域ajax获取请求(CORS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！