HTML form outputs Cannot POST /contact/send when using connect-history-api-fallback with express and Vue.js

I have a HTML form that uses the POST-method to send it’s data to my express-server. When i click on the send-button, I get a page in the browser showing:

Cannot POST /contact/send

Here is my form:

<div class="form-container">
    <div class="title-label" id="title">Send a message</div>
    <form method="POST" action="send">
    <div id="name-container">
        <input class="text-box" type="text" id="name-input" placeholder="Name" name="name" required>
    </div>
    <div id="email-container">
        <input class="text-box" type="email" id="email-input" placeholder="Email" name="email" required>
    </div>
    <div id="subject-container">
        <input class="text-box" type="text" id="subject-input" placeholder="Subject" name="subject" required>
    </div>
    <div id="message-container">
        <textarea class="text-box" id="message-textarea" placeholder="Message" name="message" required></textarea>
    </div>
    <div class="Button" id="send-button-container">
        <input type="submit" id="send-button-submit" value="Send">
    </div>
    </form>
</div>

On the server i use a node module called nodemailer to be able to send the form-data as a mail. Here is the server:

/* Static file server */
const express = require("express");

const app = express();
const port = 3000;

app.use(express.static('../dist'));

app.listen(port, () => console.log(`Server running on port ${port}!`));
// app.listen(port);

/* Mail server */
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

const nodemailer = require("nodemailer");

app.post("/send", (req, res) => {
    var transporter = nodemailer.createTransport({
        host: '',
        port: 0,
        secure: false,
        auth: {
            user: '',
            pass: ''
        }
    });
    
    var mailOptions = {
        from: '',
        to: '',
        subject: req.body.subject,
        text: "Name: " + req.body.name + "\nEmail: " + req.body.email + "\nMessage:\n" + req.body.message
    };
    
    transporter.sendMail(mailOptions, function(error, info){
        if (error) {
            console.log(error);
            res.status(400).send("The message couldn't be sent.")
        } else {
            console.log('Email sent: ' + info.response);
            res.send("Message sent.");
        }
    });
});

I have to use the HTML 5 history API because i’m using vue-router otherwise when i e.g. refresh a page (other than the homepage) it cannot load the page. This is how i use the API:

const history = require('connect-history-api-fallback');

app.use(history({
    //route to homepage
    index: '/',

    //also include requests with a . (DOT), eg. files
    disableDotRule: true,

    //for logging:
    verbose: true
    
    }));
app.use(express.static('../dist'));

When i don’t use the history API, my code works. Especially, when I remove this last line from my history API code, everything works:

app.use(express.static('../dist'));

But then the history API doesn’t work. What am I doing wrong here and how can I solve this?

Hi. Shouldn’t the action in the form be /send
Now it is relative so if the form is on the address /contact will the form be posted to /contact/send

1 Like

Hi. Thank you for your answer. I think I tried both and it didn’t matter.

I have now decided to remove the server code and deploy my frontend-code to Netlify for now.

1 Like