Greetings! So I am building a MERN stack using vite and redux toolkit for handling API request. I am building an e-commerce app. All seemed fine and working until I decided to deploy it here in render.com. Before I decided to post, I lurked around a little bit to see if others also encountered this kind of problem. I tried to add in my cors
Luckily, there is a little progress. My home page can now call my products API and can now display the images. It can also now call users API and can now log in and register and generate JWT. However, when I tried to check the users in my admin account, I couldn’t generate a token, my GET request was unauthorized and I could not view the users. I can check all the products in my admin account but since there is a problem accessing my JWT token, I can’t create a new product or delete one.
this is my server.js
`import path from ‘path’;
import express from ‘express’;
import cors from ‘cors’;
import dotenv from ‘dotenv’;
import cookieParser from ‘cookie-parser’;
dotenv.config();
import connectDB from ‘./config/config.js’
import { notFound, errorHandler } from ‘./middleware/errorMiddleware.js’;
import productRoutes from ‘./routes/productRoutes.js’;
import userRoutes from ‘./routes/userRoutes.js’;
import orderRoutes from ‘./routes/orderRoutes.js’;
import uploadRoutes from ‘./routes/uploadRoutes.js’;
const port = process.env.PORT;
const app = express()
import { ALLOWED_ORIGIN } from ‘./utils/allowedOrigin.js’;
app.use(cors({
origin: ALLOWED_ORIGIN,
credentials: true,
methods: [‘GET’, ‘POST’, ‘PUT’, ‘DELETE’],
allowedHeaders: [‘Origin’, ‘Content-Type’, ‘Accept’, ‘Authorization’, ‘X-Request-With’, ‘Access-Control-Allow-Origin’],
}));
// app.use(cors({
// origin: ‘http://localhost:5173’,
// credentials: true,
// }));
connectDB(); // connect to MongoDB
//body parser middleware
app.use(express.json())
app.use(express.urlencoded({extended: true}))
//cookie parser middleware - allow to access cookies and the jwt
app.use(cookieParser())
app.use(‘/api/products’, productRoutes);
app.use(‘/api/users’, userRoutes);
app.use(‘/api/orders’, orderRoutes);
app.use(‘/api/upload’, uploadRoutes);
app.get(‘/api/config/paypal’, (req, res) => res.send({clientId: process.env.PAYPAL_CLIENT_ID}));
const __dirname = path.resolve();
app.use(‘/uploads’, express.static(path.join(__dirname, ‘/uploads’))); // Correctly set up static file serving
app.use(‘/product_images’, express.static(path.join(__dirname, ‘dist’, ‘product_images’)));
if (process.env.NODE_ENV === ‘production’) {
// set static folder
app.use(express.static(path.join(__dirname, ‘/frontend/dist’)));
//any route that is not api will be redirected to index.html
app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'frontend', 'dist', 'index.html'))
);
} else {
app.get(‘/’, (req, res) => {
res.send(‘API is running’)
});
}
app.use(notFound);
app.use(errorHandler);
app.listen(port, () => console.log(Server running on port ${port}))`
and lastly, this is my vite.config.js
`import { defineConfig } from ‘vite’
import react from ‘@vitejs/plugin-react’
export default defineConfig({
plugins: [react()],
server: {
proxy: {
‘/api’: {
target: ‘http://localhost:8000’,
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, ‘’),
},
},
},
})
`
This is my first time deploying a page that I created. 