如何在React.js中获取http头部信息

Question

如何在React.js中获取http头部信息

node.jsreactjshttp-headersreact-router

17

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

我通过以下URL调用页面：

http://localhost/dashboard

我设置头文件，例如authcode=1234。

然后我使用此路线加载页面：

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

在页面构造函数中，是否有类似于this.props.header的东西可以调用？

- Wayneio

什么头文件？这里没有任何 http-request 在进行。使用 react-router 时，您只需要决定在哪个 route 上显示哪个组件。但是没有进行 http 请求。如果我错了，请纠正我。 - Anurag Awasthi

@anuragasaurus 我明白你的意思，当通过其他页面导航时。我是指从另一个URL到这个URL的第一个请求，传递标题。我已经更新了问题。 - Wayneio

3个回答

4

如果想要获取当前页面的请求头信息，只能通过JavaScript发送HTTP请求来实现。更多信息可以查看此答案。

在你的服务器上添加一个虚拟的API URL，在页面加载完毕后向其发送请求，这样就能获取到请求头信息了。

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

- Anurag Awasthi

我们能以这种方式读取当前页面的请求头吗？ - MAK

只有当您向一个URL发出请求，该URL恰好与当前页面相同时，@MAK才会生效。 - Ben Wheeler

4

这不被视为相同的请求！它是一个新的HTTP请求！因此可能没有相同的头信息。 - Moslem Hadi

右侧对我不起作用。 - Rajesh N

0

我不得不解决这个相同的问题，而不是相同的请求，因此无法同时适用于尝试进行身份验证的不同用户。

使用服务器端脚本来修改您的HTML或将其放在“客户端可以访问的地方”可能是可行的方法。例如，在初始服务器请求中使用会话变量或某个数据库查找密钥来获取身份验证信息，然后让客户端使用相同的密钥来获取身份验证。（这可能会导致会话劫持问题...所以我还在考虑更好的解决方案。）

- Fan Fan

1

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GProst · Accepted Answer

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

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

然后在您的应用程序中，您可以通过window.__INITIAL_HEADERS__变量访问头信息。