How to add custom HTTP headers in React application?

Question

I have a react js application. I want to add some http headers in the every response that's being returned from the app. Could you please suggest how to implement this !

NOTE : I am not trying to call any api with headers in request. I want my react app to respond with some custom headers in the response

As far as I understand this should be done on a web server where react app is hosted. — Dovlet Mamenov
– Dovlet Mamenov, Commented Oct 14, 2020 at 5:54
If you are talking about your Dev env only check this question — phoenixstudio
– phoenixstudio, Commented Dec 3, 2022 at 22:22

i.am.jabi · Accepted Answer · 2020-12-02 10:53:55Z

-1

As Dovlet Mamenov mentioned in the comment, this has to be done on the web server wherever react app is hosted.

For example, If react app is hosted on the Apache server, then these http headers in the response should be added on the Apache server conf.

answered Dec 2, 2020 at 10:53

i.am.jabi

6881 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jesse Nickles Over a year ago

This is sort of a non-answer to the question, hopefully someone can provide an example of how React might work with Nginx/Apache to do this.

Rémi Rodrigues · Accepted Answer · 2019-10-04 09:20:53Z

-4

const header = new Headers();
header.append('Access-Control-Allow-Origin', '*');

const body = {
  author: author,
  text: text
}

axios.post("https://api.test/posts/create", body, header)
  .then((res) => {
    this.setState({
      result: res
    });
  })
  .catch((error) => {
    this.setState({
      error: error.message
    });
  })

You have to use the native object Headers, and add it in axios.

answered Oct 4, 2019 at 9:20

Rémi Rodrigues

9

4 Comments

i.am.jabi Over a year ago

What is this url in "axios.post("api.test/posts/create", body, header)" . I'm not calling any api. I have a web app( a react app ) that's being invoked from the browser. I want to add response headers and see the headers in the browser dev tools

Rémi Rodrigues Over a year ago

Ok, I thought you wanted to post content to an API. The url was an example.

i.am.jabi Over a year ago

nope. I want to add headers in the response of react app

Arman Safikhani Over a year ago

This is absolutely not correct, you are trying to add a response header in request headers, this is not doable! BTW the syntax is not correct, you need to pass an object as the third parameter like this: {headers: { 'SOME_HEADER_KEY': 'SOME_VALUE' } }

Collectives™ on Stack Overflow

How to add custom HTTP headers in React application?

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related