浏览器发送了两个请求，但只有本地主机被调用

Question

I have an node js API.

app.post('/myapi', function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Request-With");
    res.header("Content-Type", "application/json");
    res.header("Accept", "application/json");
    * do something *
    res.json({ api : "api called successfully" });
});

I have a html code placed in the public folder. I am using express to run both the html code and backend APIs. My html code has request fetch as,

var headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json, text/plain, */*');

var options = {
  method: 'POST',
  body: JSON.stringify(loginDetails),
  headers: headers,
  mode: 'no-cors'
};
fetch('http://localhost:3001/myapi', options)
.then(function (response) {
  console.log(response);
  res=response.statusCode;
  // return response
  if (res==0) {
    window.location.assign("http://localhost:3001/home.html");
  }

});

When I run the code in browser. When I click on a button that calls the above frontend code. It sends two request. Both the call fails. One is localhost request which is document call and other is the API call. But there is no response in the API call.

I was getting response in UI from the / call,

cannot POST/

So I tried adding following code,

app.post('/', function (req, res) {
    res.json({ "status": "successfull" });
});

Now also there is two calls but UI returns {status : successfull} (output of /). But it is not returning output of /myapi.

Can someone please help?

I am getting an infinity initiator for localhost document. See the screenshot.

Answer 1

Append any unique parameter to request to avoid sending cached version of request.

/api/name?id=<unique_param>

You can find more details here and here .