节点js中路由期间的CORS问题

Question

我正在尝试将我的 Angular 应用程序连接到我的节点服务器，我不想将我的路由保留在服务器文件中，所以我有一个看起来像这样的节点服务器文件

    var express         = require('express');
    var path            = require('path');
    var bodyParser      = require('body-parser');
    var morgan          = require('morgan');  
    var app             = express();
    var router          = express.Router(); 
    var port            = process.env.PORT || 3000;
    var mongoose        = require('mongoose');
    var cors            = require('cors');

    app.use(cors())
    var db ='mongodb://localhost:27017/demo'  
    mongoose.connect(db,function(err){
      if(err){
        console.log("err");
      }
      else{
        console.log("coonected to db");
      }
    })


    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());
    app.use(morgan('dev'));


    app.set('views', path.join(__dirname,'views'));
    app.set('view engine','ejs');
    app.engine('html',require('ejs').renderFile);

    app.use(express.static(path.join(__dirname,'app')));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended:false}));

    app.get('/',function(req,res){
        console.log("you have reached server");
        res.json('wtf');
    })


    module.exports = app;
    require('./route.js');
    app.listen(port); 

在 route.js 我有这样的路线

    var login   = require ('./api/login');
    var app     = require('./server')
    app.get('/login',login.authenticate);

如果我在节点服务器上使用它可以正常工作，但如果我在角度服务器上使用它会显示此错误：

从“localhost:3000/login”重定向到“localhost:3000/login/”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'localhost:4200'。

它只发生在我在route.js 中定义的路由上。如果我在server.js 中定义相同的路线，它们可以正常工作。

PS：我也用过

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
}); 

以及此代码的一些变体，但如果我想路由到我的路由文件中的登录 url，则没有任何效果

Answer 1

您的应用程序在 routes.js 和 server.js 中引用的不是同一个东西。因此，您的“应用程序”将无法在 routes.js 中运行。如果你想在 routes.js 中使用 app = express() ，你可以在 server.js 中添加类似这样的内容

var Routes = require('./routes.js');
var r = new Routes(app);

所以为了像这样实例化路由，你的 routes.js 应该如下所示：

module.exports = function(app){
    var login   = require ('./api/login');
    app.get('/login',login.authenticate);
    ...
}

旧答案：

@Anurag Singh Bisht 也回答了您应该允许跨域请求。我的回答会略有不同：

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});

Answer 2

您需要在您的服务器中allow cross origin，以便您的前端可以访问它。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
});

Answer 3

您需要添加以下代码来处理从浏览器发送的preflight 请求。

const cors = require('cors')
const corsOptions = {
  origin: '*'
}
app.use(cors(corsOptions))

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});