React + Rails CORS 问题

Posted 2023-03-04

【中文标题】React + Rails CORS 问题

【英文标题】：React + Rails CORS issue

【发布时间】：2021-07-25 22:02:21

【问题描述】：

每次我的前端项目尝试向后端发出请求时都会出错。出于某种原因，每次我尝试执行请求时它都会被 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下，前端在https://vlipo.herokuapp.com下

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

【参考方案1】：

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

将 Access-Control-Allow-Origin 设置为类似 [localhost:3000] 而不是通配符，因此您的客户端（在 localhost:3000 上运行）可以请求服务器。

或在您的客户端设置 withCredentials=false 模式。我通常使用 axios 并做这样的事情

---

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

---

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

【讨论】：

如果我需要将 withCredentials 设置为 true 以便从后端接收 cookie，我该怎么办？

那你只剩下第一个选项了，我猜...

试过了，效果很好！感谢您的帮助