React + Rails CORS 问题

Question

每次我的前端项目尝试向后端发出请求时，我都会出错。出于某种原因，每次我尝试执行请求时，它都会被 CORS 阻止，我已经配置了 CORS，老实说，我不知道我还需要做什么。我正在使用 rack-cors gem 并且我在 heroku 中同时托管前端和后端。

chrome error on requests

这是我的 cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "https://vlipo.herokuapp.com"
    resource "*", headers: :any, methods: :any, credentials: true
  end
end

显然后端在https://vlipo-backend.herokuapp.com and the frontend in https://vlipo.herokuapp.com

下

如果值得知道的话，我在前端使用 React，我的 ruby 版本是 2.6.6，我的 rails 版本是 6.0.3。

Answer 1

它抱怨 Access-Control-Allow-Origin header 值太宽泛：它设置为通配符 * 这意味着每个人都可以向您的服务器发出请求。有两种方法可以解决这个问题

要么将 Access-Control-Allow-Origin 设置为 [localhost:3000] 而不是通配符，这样您的客户端（运行 localhost:3000) 可以请求服务器。
或者在客户端设置withCredentials=false模式。我通常使用 axios 和做这样的事情

axios.defaults.withCredentials = process.env.NODE_ENV !== 'development';

如果您不使用 axios，您可以查看 MDN docs 如何操作。

React + Rails CORS 问题

React + Rails CORS issue

ruby-on-rails

heroku

cors

reactjs

ruby-on-rails-6