Rails 5 API + React + CORS + Heroku + GH 页面

Posted

技术标签:

【中文标题】Rails 5 API + React + CORS + Heroku + GH 页面【英文标题】:Rails 5 API + React + CORS + Heroku + GH Pages 【发布时间】:2019-04-12 22:49:38 【问题描述】:

早安

又是一个令人头疼的时刻,可以寻求帮助。

我有一个使用 Rails 5 API 的 React 客户端。一切都在本地主机上运行良好,运行良好。我首先将客户端部署到 GH 页面,然后将 API 部署到 Heroku,但无法向服务器发出 post 请求,我不断收到以下信息:

Access to XMLHttpRequest at 'https://xxxx.herokuapp.com/auth/login' from origin 'https://xxxx.github.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

同样的请求从 Postman 可以正常工作,但现在它在 localhost 中也被破坏了,所以我无能为力:-(

问题显然是 CORS - 我已经尝试了多种配置,但似乎没有任何影响,因为我不断收到完全相同的错误。

我有rack-cors gem。我的application.rb 看起来像这样:

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

一件奇怪的事情是,当我运行 bundle exec rake middleware 时,我在列表顶部得到了 2 个 use Rack::Cors - 似乎无法找出原因。

我尝试在application_controller.rb 中手动设置标题:

after_filter :cors_set_access_control_headers



def cors_preflight_check
    if request.method == 'OPTIONS'
      cors_set_access_control_headers
      render text: '', content_type: 'text/plain'
    end
  end

  # protected
  def cors_set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, PATCH, OPTIONS'
    headers['Access-Control-Request-Method'] = '*'
    headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization, Credentials'
  end

我尝试了其他一些方法,但仍然遇到同样该死的错误。一些帮助会很棒,在此先感谢!

【问题讨论】:

您是否有机会研究 CSRF? Rails 将真实性令牌添加到您的所有表单以验证请求的来源。您需要禁用对将通过来自应用程序外部的请求访问的特定操作的检查:skip_before_action :verify_authenticity_token, :only => [:update] 或您需要的其他操作 我的 users_controller.rb 中有 skip_before_action :authenticate_request, only: %i[login register] 并得到相同的结果 【参考方案1】:

已修复 - 我不知何故错过了错误的 origins 设置的明显 cors.rb 文件

【讨论】:

以上是关于Rails 5 API + React + CORS + Heroku + GH 页面的主要内容,如果未能解决你的问题,请参考以下文章

如何将 React Native 应用程序上的本地图像文件上传到 Rails api?

Rails 6 API + React + Google login:登录后如何授权用户访问某些服务器路由?

如何在 ActionCable rails-5-api 应用程序中获取 current_user?

无法从 react-admin 访问由 rails 开发的 API

根据我在 rails/react 应用程序上的 api 调用状态更新我的视图

在 Heroku 上使用 Rails API 部署 Create-React-App