'Differentiate Frontend GET request and Backend GET request in Express and Vue
I developed an API using MongoDB, Express, and Node JS, the API was working fine, I designed the Frontend using Vue JS, API running in server directory, while the Frontend running in client directory both were working independently normal.
I configure the app like this:
const path = require("path");
module.exports = {
outputDir: path.resolve(__dirname, '../server/public'),
devServer: {
proxy: {
'/api': {
target: "http://localhost:5000"
}
}
}
}
After I ran the build command I deploy the MEVN Stack app but it is mixing up both API and Client GET requests, check the server.js file:
const express = require('express');
const dotenv = require('dotenv');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const cors = require('cors');
const morgan = require('morgan');
const path = require('path');
const cookieParser = require('cookie-parser');
const errorHandler = require('./Middleware/error');
// Load ENV vars
dotenv.config({ path: './.env'});
// Initialise the app
const connectDB = require('./config/db');
// Connect to database
connectDB();
const app = express();
// Import routes files
const auth = require("./Route/auth");
const users = require("./Route/users");
const cards = require("./Route/cards");
const webhooks = require("./Route/webhooks");
const transactions = require("./Route/transactions");
// Configure bodyparser to handle post requests
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
// Cookie parser
app.use(cookieParser());
app.use(cors());
var port = process.env.PORT || 5000;
// Mount API routes in the App
app.use('/api/auth', auth);
app.use('/api/users', users);
app.use('/api/cards', cards);
app.use('/api/webhooks', webhooks);
app.use('/api/transactions', transactions);
app.use(errorHandler);
app.use(express.static(__dirname + '/public'));
app.get('/.*/', function (request, response) {
response.sendFile(path.resolve(__dirname, './public/index.html'));
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
