为何Fetch POST请求无法返回响应头，而curl POST请求可以？

核心原因：CORS响应头暴露限制 #

浏览器端的Fetch API受CORS（跨源资源共享）规则约束，而curl这类命令行工具不受此限制。Rails服务器返回的Bearer Token通常属于自定义响应头（比如Authorization或自定义的X-Auth-Token），这类头默认不会被浏览器暴露给前端JavaScript，除非服务器通过Access-Control-Expose-Headers响应头明确指定允许暴露的头字段。

解决步骤 #

1. 配置Rails的CORS规则 #

如果你的项目使用rack-cors gem处理跨域，打开config/initializers/cors.rb，在配置中添加expose选项，指定要暴露的响应头名称：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000' # 替换为你的前端域名
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      expose: ['Authorization'] # 这里填写Bearer Token所在的响应头名称
  end
end

2. 确认服务器端响应头设置 #

在login控制器动作中，确保你通过response.headers正确设置了Bearer Token：

def login
  # 认证逻辑（验证邮箱密码等）
  token = generate_bearer_token(current_user)
  response.headers['Authorization'] = "Bearer #{token}"
  render json: { message: "Logged in successfully" }
end

3. 前端Fetch请求获取响应头 #

配置完成后，前端可以通过response.headers.get()方法获取指定的响应头：

fetch('http://localhost:3000/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ email: 'your-email@example.com', password: 'your-password' })
})
.then(response => {
  const token = response.headers.get('Authorization');
  console.log('Bearer Token:', token); // 此时可正常获取到token
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('请求错误:', error));

额外注意事项 #

• 如果你的Bearer Token存放在自定义头（如X-Auth-Token），需要将expose数组中的值替换为对应的头名称。
• 修改CORS配置后必须重启Rails服务器，否则新配置不会生效。

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