Login/Register
How do I get http headers in React.js
Asked Answered
Solved node.jsreactjshttp-headersreact-router
W

3

17

I've made a request to a React page, and I need to get the headers from the request.

I call the page via the URL:

http://localhost/dashboard

and I set headers, for example authcode=1234.

I then load the page with this route:

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

is there something like this.props.header, I can call in the page constructor?

Wilheminawilhide answered 4/6, 2017 at 13:49 Comment(2)
What headers? There is no http-request going on. With react-router you just decide what component to show on which route. But there is no http-request. Correct me if I'm wrong. – Euchromatin
@anuragasaurus I see what you mean, when navigating via other pages. I'm talking in terms of the first request from another URL to this one, passing in headers. I've updated the question. – Wilheminawilhide
E
4

You cant get current page headers without sending a http request via javascript. See this answer for more info.

Add a dummy api url on your server and hit it after your page loadn then you can get the headers.

class App extends React.Component{
    //some code
    componentDidMount(){
       fetch(Some_API).then(response=>{
           console.log(response.headers)
       })
    }
    //some code
}
Euchromatin answered 4/6, 2017 at 14:47 Comment(4)
Can we read current page's request headers in this way? – Dambrosio
@Dambrosio Only if you make a request to a URL that happens to be the same as the current page. – Rattler
It is not considered the same request! it is a new HTTP request! so it may not have the same headers. – Tenney
right not working for me – Fike
M
7

It's not possible to access page headers via client JavaScript. You can get these request headers on your server side and then pass them into index.html of your React app. For example:

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

Then in your app you can access the headers via window.__INITIAL_HEADERS__ variable.

Maureenmaureene answered 5/6, 2017 at 6:33 Comment(5)
How does this work? You need a templating engine to dynamically put variables defined by the server side. – Voiceless
@Voiceless yes, you can use any of your choice – Maureenmaureene
thanks i just had my express serve a file it can use to inject the variable and make them available on the react app – Voiceless
I'm using nginx as the web server. Is it possible for anyone to explain on how to set the headers with the request – Sectarian
anyother way, I dont have index.html – Fike
E
4

You cant get current page headers without sending a http request via javascript. See this answer for more info.

Add a dummy api url on your server and hit it after your page loadn then you can get the headers.

class App extends React.Component{
    //some code
    componentDidMount(){
       fetch(Some_API).then(response=>{
           console.log(response.headers)
       })
    }
    //some code
}
Euchromatin answered 4/6, 2017 at 14:47 Comment(4)
Can we read current page's request headers in this way? – Dambrosio
@Dambrosio Only if you make a request to a URL that happens to be the same as the current page. – Rattler
It is not considered the same request! it is a new HTTP request! so it may not have the same headers. – Tenney
right not working for me – Fike
S
0

I had to solve this same issue, NOT the same request, hence won't work for diff users trying to get in (auth) at the same time.

Using Server Side scripting to mod your html OR put it "somewhere client can access" is probably the way to go. i.e. session var or some db lookup key in the initial server req with the auth info, then have client use the same key to fetch the auth. (this may open up to session hijacks... so I'm still pondering for a better solution.

Synder answered 6/6, 2023 at 10:17 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Twoedged

© 2022 - 2024 — McMap. All rights reserved.