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. There is no <center> any more. We've had CSS for presentation for over two decades. — Quentin
– Quentin, Commented Aug 7, 2020 at 15:21
You could try shifting the fetch api code to the server side (button enclosed in a form) or an <a> tag — Nehal Samee
– Nehal Samee, Commented Aug 7, 2020 at 15:42

Quentin · Accepted Answer · 2020-08-07 15:20:26Z

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 7, 2020 at 15:20

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

5 Comments

RAKTIM BANERJEE Over a year ago

Actually my plan is to send authentication token with every DB query request and verify the token first then perform the query.

Quentin Over a year ago

Use a cookie for that if you are dealing with whole pages.

RAKTIM BANERJEE Over a year ago

So, can you tell me a way how to send authentication token to the server with headers?

RAKTIM BANERJEE Over a year ago

But, if I use cookie then how to add headers to a request? How to send the request to the server?

Quentin Over a year ago

The login response would include a Set-Cookie header. Then the browser will send a Cookie header on subsequent requests.

Collectives™ on Stack Overflow

How to handle fetch API request with express js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related