React.js 应用没有 'Access-Control-Allow-Origin' header

Question

我正在尝试从一个简单的 React.js 应用程序中删除用户。我收到 302 错误，我的控制台也显示此错误。

Fetch API cannot load http://localhost:3001/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Uncaught (in promise)TypeError: Failed to fetch

我在客户端的删除请求如下所示：

export function deleteUser(id){
  return fetch(`http://localhost:3000/api/v1/users/${id}`, {
    method: 'DELETE'
  }).then( res => res.json() )
}

顶级容器中的函数是这样的：

handleDeleteUser(id){
    localStorage.clear('token')
    deleteUser(id)
    .then((data) => this.setState({
      current_user: data
    }))
  }

我遇到过很多关于 CORS 的答案。这是我来自服务器端的 application.rb 文件：

module Our_gardenApi
  class Application < Rails::Application
    config.api_only = true

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

我的 UsersController 也在尝试像这样重定向：

def destroy
  user = User.find(params[:id])
  user.destroy
  redirect_to "http://localhost:3001"
end

gem 'rack-cors' 也安装在我的 Gemfile 中。

最终用户删除成功。我只是运行遇到重定向问题。 任何解释方面的帮助将不胜感激！

Answer 1

将此 gem 添加到您的 gem 文件中：

https://github.com/cyu/rack-cors

运行捆绑安装

然后在您的 application.rb 文件中进行此配置

module YourApp
  class Application < Rails::Application

    # ...

    # Rails 5

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

    # Rails 3/4

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

  end
end

React.js 应用没有 'Access-Control-Allow-Origin' header

No 'Access-Control-Allow-Origin' header for React.js app

javascript

ruby-on-rails

cors

preflight

reactjs