节点js路由期间的CORS问题
我想连接我的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);
它工作正常,如果我在节点服务器上使用它,但如果我在angular度服务器上使用它显示此错误:
从“localhost:3000 / login”redirect到“localhost:3000 / login /”已被CORS策略阻止:在请求的资源上没有“Access-Control-Allow-Origin”头。 因此原产地'本地主机: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
您在route.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); ... }
老答案:
正如@Auurag 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(); });
您需要allow cross origin
服务器中的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(); });
您需要添加以下代码来处理从浏览器发送的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(); });
- Gulp量angular器:seleniumwebdriver退出状态1
- 我正在使用angular2斜angularcli,并尝试使用ng2-datetime,但它给错误“TypeError:无法读取属性'jQuery'未定义的”
- 量angular器sendkeys不起作用:键码转换需要x显示
- 将Angular2应用程序移动到新系统时,traceur会导致什么错误?
- 如何使用Typescript构buildAngular2 + NodeJs + Express应用程序
- angular4 – 我继续得到即使手动安装portfinder也找不到模块“portfinder”
- angular2嵌套路由不工作,没有错误报告,但空白页
- 量angular器在onPrepare之后随机失败
- 我如何解决量angular器testing中的两个不同的承诺?