How to handle fetch API request with express js

Question

I want to send request using fetch API and want to handle those request with Express JS.

I have created server.js (express JS), index.html (home page) and signin.html (signin page).

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
</head>
<body>
    <h1> <center>Welcome</center> </h1>
    <center> <button onclick="login()">Signin</button> </center>
</body>

<script>
    function login() 
    {   
        fetch('./signin.html')
        .then(res => console.log(res))
        .catch(err => console.log(err));        
    }   
</script>

</html>

server.js

const path = require('path');
const express = require('express');
const app = express();

app.get('/', (req,res) =>{
    res.sendFile(path.join(__dirname,'index.html'));
}); 

app.get('/signin.html', (req,res) =>{
    res.sendFile(path.join(__dirname,'signin.html'));
}); 

app.listen(8080);

I want when user click the Sign in button, fetch api send a request to server.js file and server.js send back response to fetch api and render the response to the browser.

Is it possible?

Use a [validator](https://validator.nu/). There is no `` any more. We've had CSS for presentation for over two decades. — Quentin, Aug 07 '20 at 15:21
You could try shifting the fetch api code to the server side (button enclosed in a form) or an tag — Nehal Samee, Aug 07 '20 at 15:42

score 2 · Answer 1 · answered Aug 07 '20 at 15:20

2

The entire point of Ajax is that the response is handled by your JavaScript and not by navigating to a new page.

Now, you could push a new URL into the history and replace the entire DOM of the page with the new data, but it would be, in relative terms, hugely complex and fiddly.

Just use a regular link and don't involve client-side JavaScript.

answered Aug 07 '20 at 15:20

Quentin

914,110
126
1,211
1,335

Actually my plan is to send authentication token with every DB query request and verify the token first then perform the query. – RAKTIM BANERJEE Aug 07 '20 at 15:30
1

Use a cookie for that if you are dealing with whole pages. – Quentin Aug 07 '20 at 15:31
So, can you tell me a way how to send authentication token to the server with headers? – RAKTIM BANERJEE Aug 07 '20 at 15:31
But, if I use cookie then how to add headers to a request? How to send the request to the server? – RAKTIM BANERJEE Aug 07 '20 at 15:33
The login response would include a `Set-Cookie` header. Then the browser will send a `Cookie` header on subsequent requests. – Quentin Aug 07 '20 at 15:41

How to handle fetch API request with express js

1 Answers1