如何在 codeanywhere 中配置 React API 代理

Posted 2023-03-07

【中文标题】如何在 codeanywhere 中配置 React API 代理

【英文标题】：How to configure React API proxy in codeanywhere

【发布时间】：2019-08-10 07:26:06

【问题描述】：

我在 CloudAnywhere 中使用 Rails API 设置 CORS 时遇到问题。

我正在尝试在两个单独的 CloudAnywhere 容器中设置一个 React 前端和一个 Rails 后端。 （我们称他们为rails.codeanyapp.com 和react.codeanyapp.com。）

React 前端设置了 Rails 代理（即 package.json 中的 "proxy": "https://rails.codeanyapp.com"）。

Rails 后端在config/initializers/cors.rb中有如下代码

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://react.codeanyapp.com/'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

GET 请求工作正常。但是，当我进行 POST 时，我在 Rails 中收到以下错误

Started POST "/authors.json" for 104.42.117.130 at 2019-03-19 13:05:52 -0400
Cannot render console from 104.42.117.130! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by AuthorsController#create as JSON
  Parameters: "fname"=>"James", "lname"=>"madison", "email"=>"[e-mail]", "author"=>"fname"=>"James", "lname"=>"madison", "email"=>"[e-mail]"
HTTP Origin header (https://rails.codeanyapp.com) didn't match request.base_url (https://react.codeanyapp.com)
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)

请注意，CodeAnywhere 已设置，因此公共 URL 为 https://rails.codeanyapp.com，即使服务器实际上在端口 3000 上运行。我怀疑当传入端口“转发”到 3000 时问题出在 Rails 端；但是，我认为我没有权限修改这种行为。

还要注意，Origin 和 base 都是 https。 （关于这个问题的大多数其他帖子都是当一个是http，另一个是https。）

【参考方案1】：

主要问题是我变得懒惰并试图简单地将json 渲染扔到现有控制器中。 （具体来说，我在现有控制器中添加了一个respond_to 块，它是ApplicationController 的子类。）问题在于，默认情况下，Rails 添加了 CSRF 和其他不适用于 API 的中间件.

正确的解决方案是创建一个单独的控制器，继承自ApplicationController::APICombining API and web views in Rails 5

快速而肮脏的解决方案是通过将 protect_from_forgery unless: -> request.format.json? 添加到 application_controller.rb 来关闭 API 调用的 CSRF