MeanStack: blocked by cors on Linux(ubuntu) - node.js

Question

I'm doing this MeanStack course and I managed to create several files with post routes along with their schemas. But the last file I created, shopping cart schema and its route is getting blocked by cors. I tried to move the path to the files where the post works but still, get blocked, thought yesterday this workaround actually worked, but today is not working anymore. I've tried even to add an extension to chrome but nothing is working. On windows I can easily disable the cors, but not on linux
app.js
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const postsRoutes = require("./routes/posts");
const userRoutes = require("./routes/user");
const nasaRoutes = require("./routes/nasa");
const movieRoutes = require("./routes/movies");
const shoppingCartRoutes = require("./routes/shoppingCart");
const app = express();
mongoose
.connect('mongodb+srv://icenine:qN4pI8Tuy0chs7qK#mean-robot-cluster.zyjkf.mongodb.net/Mean-Robot-Cluster?retryWrites=true&w=majority'
)
.then(() => {
console.log("Connected to database!");
})
.catch(() => {
console.log("Connection failed!");
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Authorization"
);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PATCH, PUT, DELETE, OPTIONS"
);
next();
});
app.use("/api/posts", postsRoutes);
app.use("/api/user", userRoutes);
app.use("/api/nasa", nasaRoutes);
app.use("/api/movies", movieRoutes);
app.use("api/shoppingCart", shoppingCartRoutes)
module.exports = app;
the shopping cart schema
const mongoose = require('mongoose');
const shoppingCartSchema = mongoose.Schema({
dateCrated: { type: Number, required: true },
});
module.exports = mongoose.model('ShoppingCart', shoppingCartSchema);
the route:
const express = require("express");
const ShoppingCart = require("../models/shoppingCart");
const router = express.Router();
router.post("", (req, res, next) => {
const cart = new ShoppingCart({
date:req.body.date
});
console.log(req.body)
cart.save().then(createdCart => {
res.status(201).json({
message: "Cart created successfully",
cartId: createdCart._id
});
})
.catch(err => {
res.status(500).json({
error: err
});
});
});
The Front End Angular (service)
createCart(){
let date={dateCreated: new Date().getTime()}
return this.http.post<{message:string, cartId:string}>('http://localhost:3000/api/shoppingCart', date)
}
Component
addToCart(product:Product){
let cartId = localStorage.getItem('cartId')
if(!cartId){
this.shoppingService.createCart()
.subscribe(result =>{
localStorage.setItem('cartId', result.cartId);
});
}//etc
}
The console error (front end)

Answer 1

The solution for Linux -Ubuntu is to open the terminal and simply type:
google-chrome --disable-web-security --user-data-dir=/tmp

Answer 2

You are trying to access your API which is on a different port and that's causing the cors issue, at least in the localhost environment.
you can use the cors package to allow cross-origin access.
...
const cors = require("cors");
...
app.use(cors());
...
If this is only a local project you can leave it as is or you can pass parameters to the cors function if you gonna publish your project to limit the origins allowed to access your API.