如何在Rails后端构建的React.js前端中获取HTTP响应头？

首先得提醒你一个关键前提：跨域请求下，自定义响应头必须在Rails的CORS配置里明确暴露出来，否则前端是拿不到的，这是很多人踩坑的点。

第一步：配置Rails的CORS允许暴露自定义头 #

打开你的Rails项目里的config/initializers/cors.rb，确保配置里包含expose: ['publishable-key']，比如：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*' # 生产环境建议替换成你的前端域名
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      expose: ['publishable-key'] # 新增这行，把自定义头加入暴露列表
  end
end

改完之后记得重启Rails服务器，让配置生效。

第二步：React端的正确实现 #

假设你用的zenApi是基于Axios封装的（从代码风格看很像），获取响应头的写法很直接——Axios会把响应头字段转换成小写，所以你可以直接用response.headers['publishable-key']来获取。另外要注意Rails返回的JSON结构层级，实际套餐数据在response.data.data里。

完整的componentDidMount代码如下：

componentDidMount() {
  zenApi.get(SERVER)
    .then(response => {
      // 提取自定义响应头
      const pubKey = response.headers['publishable-key'];
      this.setState({ 
        pricing_plans: response.data.data, // 对应Rails返回的data字段
        pub_key: pubKey 
      });
    })
    .catch(error => {
      // 别忘了处理请求失败的情况
      console.error('获取套餐列表失败:', error);
    });
}

如果你的zenApi是基于原生fetch封装的，获取头的方式会略有不同，需要用headers.get()方法：

componentDidMount() {
  fetch(SERVER)
    .then(response => {
      const pubKey = response.headers.get('publishable-key');
      return response.json();
    })
    .then(data => {
      this.setState({ 
        pricing_plans: data.data,
        pub_key: pubKey 
      });
    })
    .catch(error => {
      console.error('获取套餐列表失败:', error);
    });
}

核心要点总结 #

• 跨域场景下，Rails必须显式配置暴露自定义头，否则前端无法读取
• 根据你使用的HTTP库（Axios/fetch）选择对应的头获取方式
• 注意Rails返回的JSON结构层级，不要拿错数据字段

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