如何在 React.js 中获取 http 标头答案

【问题标题】：How do I get http headers in React.js如何在 React.js 中获取 http 标头
【发布时间】：2017-11-05 09:21:39
【问题描述】：

我已向 React 页面发出请求，我需要从请求中获取标头。

我通过 URL 调用页面：

我设置了标头，例如 authcode=1234。

然后我用这条路线加载页面：

<Route path="dashboard" name="dashboard" component={Dashboard} onEnter={requireAuth}></Route>

有this.props.header之类的东西，我可以在页面构造函数中调用吗？

【问题讨论】：

什么标题？没有http-request 继续。使用 react-router，您只需决定在哪个 route 上显示哪个组件。但是没有http请求。如果我错了，请纠正我。
@anuragasaurus 我明白你的意思，通过其他页面导航时。我说的是从另一个 URL 到这个 URL 的第一个请求，传入标头。我已经更新了问题。

标签： node.js reactjs http-headers react-router

【解决方案1】：

无法通过客户端 JavaScript 访问页眉。您可以在服务器端获取这些请求标头，然后将它们传递到您的 React 应用程序的index.html。例如：

//in index.html
<head>
...
  <script>
    window.__INITIAL_HEADERS__ = {/* page headers */};
  </script>
</head>
<body>
...
</body>

然后在您的应用中，您可以通过window.__INITIAL_HEADERS__ 变量访问标题。

【讨论】：

这是如何工作的？您需要一个模板引擎来动态放置服务器端定义的变量。
@Byrd 是的，你可以使用任何你的选择
感谢我刚刚让我的 express 提供了一个文件，它可以用来注入变量并使它们在反应应用程序上可用

【解决方案2】：

如果不通过 javascript 发送 http 请求，您将无法获取当前页面标题。有关更多信息，请参阅此答案info。

在您的服务器上添加一个虚拟 api url，并在您的页面加载后点击它，然后您就可以获得标题。

class App extends React.Component{
    //some code
    componentDidMount(){
       fetch(Some_API).then(response=>{
           console.log(response.headers)
       })
    }
    //some code
}

【讨论】：

我们可以这样读取当前页面的请求头吗？
@MAK 仅当您向恰好与当前页面相同的 URL 发出请求时。