Heroku use Options instead of POST method

Question

I deployed my backend API on Heroku and now trying to call it with frontend API. When I do that and check logs it show that the method used is OPTIONS instead of POST and doesn't return anything. However when I make request from Postman it shows method as POST. The same backend code and frontend when deployed in localhost works perfectly fine.

Heroku Logs above one shows request from frontend and below is request from Post Man:

2020-09-22T04:50:00.422091+00:00 heroku[router]: at=info method=OPTIONS path="/api/signin" host=****-backend.herokuapp.com request_id=b93d3a15-23cf-42df-93f1-125d79017edf fwd="****" dyno=web.1 connect=1ms service=9ms status=200 bytes=215 protocol=https
2020-09-22T04:50:00.422973+00:00 app[web.1]: [0mOPTIONS /api/signin [32m200[0m 4.063 ms - 4[0m

2020-09-22T04:54:53.827158+00:00 heroku[router]: at=info method=POST path="/api/signin" host=****-backend.herokuapp.com request_id=91ccaa0c-e676-48aa-8856-364a1413460b fwd="****" dyno=web.1 connect=0ms service=60ms status=200 bytes=770 protocol=https
2020-09-22T04:54:53.822533+00:00 app[web.1]: [0mPOST /api/signin [32m200[0m 52.224 ms - 361[0m

My frontend action code:

export const signin = (user) => {
  return fetch(`${API}/signin`, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-type': 'application/json',
    },

    body: JSON.stringify(user),
  })
    .then((response) => {
      return response.json()
    })
    .catch((err) => console.log(err))
}

user_9243317 · Answer

OPTIONS is default method that call by browser to check connection with server. Postman is not browser based call so it can make direct POST request.

You need to handle OPTIONS method on Heroku and return 200 status code. that should solve your problem.

if you're using express.js then you can add below in your code to handle OPTIONS method.

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    // handle OPTIONS method
    if ('OPTIONS' == req.method) {
        return res.sendStatus(200);
    } else {
        next();
    }
});

Heroku use Options instead of POST method

1 Answers