Why isn't my Fetch request sending custom headers in React-Native?

Question

I am calling a fetch request akin to this.

fetch('https://api-endpoint.com/api',
        {
            method: "POST",
            headers: new Headers({
                'custom-header': 'custom header value'
            })
        }
     )
    .then(res=>{
        /* code */
    })
    .catch(err=>{
        /* code */
    })

But it seems that the header is not being sent to the server. The server runs on Node.js, and I am attempting to reach it with React-Native.

I have allowed "access-control-allow-origin": "*" on the server, but to no avail.

I can also reach other endpoints on the server that don't require any headers.

And lastly, I have set the headers with both new Headers() and as an object.

What exactly am I missing to allow the headers to be sent? Is there a way to see exactly what is going on with my request in react-native?

It works in postman just fine.

EDIT:

I am using the cors middleware in my server.

app.use(cors())

appConfig.init(app);

You don't need Headers constructor with fetch as object that you tried works just fine: headers : { custom-header : 'custom header value' } — ambianBeing
– ambianBeing, Commented Oct 20, 2019 at 11:59

SuleymanSah · Accepted Answer · 2019-10-21 06:18:47Z

1

Can you add these lines before using routes and try?

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");

  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");

  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization, custom-header"
  );

  res.header("Access-Control-Expose-Headers", "custom-header");

  next();
});

And if you are using express cors middleware, you can add allowedHeaders and exposedHeaders options.

https://github.com/expressjs/cors#configuration-options

note if these configuration replaces the default headers, you may need to add the default headers to the options.

app.use(
  cors({
    exposedHeaders: ["custom-header"],
    allowedHeaders: ["custom-header"]
  })
);

Lastly you had better to use fetch api like this to send headers:

fetch('https://api-endpoint.com/api',
  {
    method: "POST",
    headers: {
      "custom-header": "custom header value"
    }
  }
)
  .then(res => {
    /* code */
  })
  .catch(err => {
    /* code */
  })

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

edited Oct 21, 2019 at 6:18

answered Oct 20, 2019 at 11:53

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

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

3 Comments

Brandon Armand Over a year ago

I am using the cors middleware package, so all I did was set app.use(cors()) which sets few default options.

SuleymanSah Over a year ago

@BrandonArmand did you add your custom header in the allowedHeaders and exposedHeaders in cors options?

Brandon Armand Over a year ago

I figured it out before you got back to me. Thank you, the allowedHeaders: ["custom-header"] got it working.

Apurba A · Accepted Answer · 2022-02-18 20:50:29Z

0

Be sure,you added the header in:

res.header( "Access-Control-Allow-Headers", "Your_OWN_header,...." );

answered Feb 18, 2022 at 20:50

Apurba A

1682 silver badges9 bronze badges

Collectives™ on Stack Overflow

Why isn't my Fetch request sending custom headers in React-Native?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related