How to access headers in react.js frontend built by rails backend? - reactjs

Question

I have a get endpoint in billings_controller.rb like:
def index
plans = PricingPlan.all
response.header['publishable-key'] = Rails.configuration.stripe[:publishable_key]
render json: { status: true, message: 'List of Plans.', data: plans.to_a }
end
Now, I would like to access that HTTP header in react.js front-end app, the way I'm doing is like:
componentDidMount() {
zenApi.get(SERVER)
.then(response => {
this.setState({ pricing_plans: response.data, pub_key: response.headers['publishable-key'] });
});
}
But the response.headers is undefined. console.log(response) gives as:
{status: true, message: "List of Plans.", data: Array(6)}
but, when I look HTTP response headers in network tab in chrome developers tools, it looks like:
HTTP/1.1 304 Not Modified
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT, PATCH
Access-Control-Expose-Headers: access-token, expiry, token-type, uid, client
Access-Control-Max-Age: 1728000
publishable-key: pk_test_fYfWQWtbSsGbb1*****50VrT
ETag: W/"15cb9de83c1d4eb95f83936d5413c695"
Cache-Control: max-age=0, private, must-revalidate
X-Request-Id: b5288bbe-6783-4516-b628-110c1a29ea05
X-Runtime: 0.593409
Vary: Origin
I'm missing something or have't understood the concept I think. How can I access the "publishable-key: pk_test_fYfWQWtbSsGbb1*****50VrT" present in HTTP response header in react.js front-end.
Thank you all.

Answer 1

You can access $http headers like this:response.headers();
componentDidMount() {
zenApi.get(SERVER)
.then(response => {
var headers = response.headers();
var publishable_key = headers['publishable-key']
this.setState({ pricing_plans: response.data, pub_key: response.headers['publishable-key'] });
});
}