CORS問題節點JS

Question

我想我的角度應用程序連接到我的節點服務器，我不想讓我的路線在服務器上的文件，所以我有一個節點服務器文件看起來像這樣

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

它工作正常，如果我使用節點服務器上，但如果我用它的角服務器上就說明這個錯誤：

從重定向「本地主機：3000 /登錄'到'localhost：3000/login /'已被CORS策略阻止：在請求的資源上沒有'Access-Control-Allow-Origin'標頭。因此不允許訪問Origin'localhost：4200'。

It only happens to the routes that I define in `route.js`. If I define the same route in `server.js` they work fine. 

PS: I have also used 
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(); 
}); and some variation of this code but nothing works if I want to route to login url which is in my route file 

Answer 1

您的應用程序在routes.js和server.js中不引用相同的內容。因此你的「app」在routes.js中不起作用。

：如果你想使用的應用程序=快車（）在routes.js你可以這樣才能實例化這樣的路線您routes.js應該像添加像這裏面server.js

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

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