React.js 应用程序没有“Access-Control-Allow-Origin”标头答案

【问题标题】：No 'Access-Control-Allow-Origin' header for React.js appReact.js 应用程序没有“Access-Control-Allow-Origin”标头
【发布时间】：2018-02-07 02:27:29
【问题描述】：

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

Fetch API 无法加载 http://localhost:3001/。对预检的响应请求未通过访问控制检查：否 'Access-Control-Allow-Origin' 标头出现在请求的资源。因此，Origin 'null' 不允许访问。如果一个不透明响应满足您的需求，将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

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 中。

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

【问题讨论】：

尝试阅读 CORS 文档developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
您是否已将rack-cors gem 添加到您的gem 文件中
嘿@AshishJambhulkar。是的，我做到了。忘了提那个。谢谢！
错误消息显示Fetch API cannot load http://localhost:3001/，而你的sn-p和你的前端代码显示它正在发出请求http://localhost:3000。也就是说，不同的端口 - 3001 与 3000。如果这种不匹配只是一个错字，您可能需要更新问题以更正它。但我注意到您说您看到的是 302（重定向）。那是因为您对http://localhost:3000 的请求被重定向到http://localhost:3001/？也许您已经在 http://localhost:3000 服务器后端配置了 CORS 支持，但没有在 http://localhost:3001/ 服务器后端配置？
@sideshowbarker 嘿！感谢您的反馈。我的 CORS 知识非常薄弱，但我假设我允许使用 application.rb 文件（服务器端）中的 origins'*' 行从不同端口发送/接收请求。不同端口 3000 和 3001 的原因是因为 rails 后端服务器在 3000 上运行，所以这是我的数据库存储的地方。客户端显示在 3001。我正在发出 fetch 请求并使用该后端 3000 url，它会在适当的 rails 后端中达到某个 controller#action。

标签： javascript ruby-on-rails reactjs cors preflight

【解决方案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

【讨论】：

感谢@ashishJambulkar 的建议。在编辑整个站点的其他内容时，删除 :delete 和 :patch 方法会导致错误。不过感谢您的努力！