如何为部署在Heroku的Rails API给Netlify React前端设置浏览器Cookie

1. 补全前端请求凭证配置 #

浏览器跨域场景下默认不会携带也不会存储第三方Cookie，需要你在发起请求时主动开启凭证模式：

• 如果你使用axios发起请求，全局配置添加：

axios.defaults.withCredentials = true

单个请求可单独配置：

axios.get('https://my-app.herokuapp.com/', { withCredentials: true })

• 如果你使用原生fetch发起请求，请求配置添加：

fetch('https://my-app.herokuapp.com/', {
  credentials: 'include'
})

2. 补全CORS跨域配置 #

你当前的CORS配置只放行了域名，还需要明确允许跨域凭证，config/initializers/cors.rb完整配置参考：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 不要用*通配符，必须填写你实际的Netlify域名
    origins 'https://my-domain.netlify.app'
    resource '*', 
      headers: :any, 
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      # 必须加这一行允许跨域凭证
      credentials: true
  end
end

3. 补全Session Cookie配置 #

你当前只配置了CSRF Token的Cookie参数，还需要给Session Cookie配置相同的跨域属性，新建/修改config/initializers/session_store.rb：

Rails.application.config.session_store :cookie_store, 
  key: '_your_app_session', # 替换为你实际的应用前缀
  domain: 'my-app.herokuapp.com',
  same_site: :None,
  secure: true

验证步骤 #

配置完成后重新部署两端应用，先清空浏览器原有缓存和Cookie，再发起首次请求获取Cookie，后续发非GET请求时，需要从Cookie中取出CSRF-TOKEN的值，放到请求头X-CSRF-Token中即可正常通过校验。

内容的提问来源于stack exchange，提问作者Arturo Alvarez