MeanStack：在 Linux(ubuntu) 上被 cors 阻止

Question

我正在学习这门 MeanStack 课程，我设法创建了几个包含 post 路由及其模式的文件。但是我创建的最后一个文件，购物车架构及其路径被 cors 阻止了。我试图将路径移动到 post 工作的文件，但仍然被阻止，我认为昨天这个解决方法确实有效，但今天不再工作了。我什至尝试过向 chrome 添加扩展名，但没有任何效果。在 windows 我可以轻松禁用 cors，但在 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;

购物车架构

const mongoose = require('mongoose');

const shoppingCartSchema = mongoose.Schema({
  dateCrated: { type: Number, required: true },

});

module.exports = mongoose.model('ShoppingCart', shoppingCartSchema);

路线：

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
    });
  });
});

前端Angular（服务）

createCart(){
  let date={dateCreated: new Date().getTime()}
  return this.http.post<{message:string, cartId:string}>('http://localhost:3000/api/shoppingCart', date)

}

组件

 addToCart(product:Product){

    let cartId = localStorage.getItem('cartId')
    if(!cartId){
      this.shoppingService.createCart()
      .subscribe(result =>{
        localStorage.setItem('cartId', result.cartId);
      });
    }//etc


  }

控制台错误（前端）

Answer 1

您正在尝试访问位于不同端口的 API，这导致了 cors 问题，至少在本地主机环境中是这样。

您可以使用 cors 包来允许跨域访问。

...
const cors = require("cors");
...
app.use(cors());
...

如果这只是一个本地项目，您可以保持原样，或者如果您要发布项目以限制允许访问您的来源，则可以将参数传递给 cors 函数 API。

Answer 2

Linux -Ubuntu 的解决方案是打开终端并输入：

google-chrome --disable-web-security --user-data-dir=/tmp

MeanStack：在 Linux(ubuntu) 上被 cors 阻止

MeanStack: blocked by cors on Linux(ubuntu)

node.js

cors

mean-stack