我已向 React 页面发出请求,并需要获取请求中的标头。
我通过以下URL调用页面:
我设置头文件,例如authcode=1234。
然后我使用此路线加载页面:
<Route path="dashboard" name="dashboard" component={Dashboard} onEnter={requireAuth}></Route>
在页面构造函数中,是否有类似于this.props.header的东西可以调用?
我已向 React 页面发出请求,并需要获取请求中的标头。
我通过以下URL调用页面:
我设置头文件,例如authcode=1234。
然后我使用此路线加载页面:
<Route path="dashboard" name="dashboard" component={Dashboard} onEnter={requireAuth}></Route>
在页面构造函数中,是否有类似于this.props.header的东西可以调用?
无法通过客户端JavaScript访问页面标头。您可以在服务器端获取这些请求头,然后将它们传递到React应用程序的index.html
中。例如:
//in index.html
<head>
...
<script>
window.__INITIAL_HEADERS__ = {/* page headers */};
</script>
</head>
<body>
...
</body>
然后在您的应用程序中,您可以通过window.__INITIAL_HEADERS__
变量访问头信息。
如果想要获取当前页面的请求头信息,只能通过JavaScript发送HTTP请求来实现。 更多信息可以查看此答案。
在你的服务器上添加一个虚拟的API URL,在页面加载完毕后向其发送请求,这样就能获取到请求头信息了。
class App extends React.Component{
//some code
componentDidMount(){
fetch(Some_API).then(response=>{
console.log(response.headers)
})
}
//some code
}
我不得不解决这个相同的问题,而不是相同的请求,因此无法同时适用于尝试进行身份验证的不同用户。
使用服务器端脚本来修改您的HTML或将其放在“客户端可以访问的地方”可能是可行的方法。例如,在初始服务器请求中使用会话变量或某个数据库查找密钥来获取身份验证信息,然后让客户端使用相同的密钥来获取身份验证。(这可能会导致会话劫持问题...所以我还在考虑更好的解决方案。)
http-request
在进行。使用 react-router 时,您只需要决定在哪个route
上显示哪个组件。但是没有进行 http 请求。如果我错了,请纠正我。 - Anurag Awasthi