不允许本地Node.js服务器中的跨域请求 [英] Can't allow Cross-Origin Request in local Nodejs server
问题描述
我已经在nodejs中创建了一个本地REST API服务器，该服务器正在从本地Mongodb数据库中获取数据.我还创建了一个基本网页，该网页从本地服务器请求此数据.现在，当我尝试从网页获取数据时，出现以下错误:
I've created a local REST API server in nodejs, which is fetching data from local Mongodb database. I've also created a basic web page, which request this data from the server locally. Now, when I try to get data from web page, it gives me following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4000/todos. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
我在stackoverflow上进行了搜索，发现 THIS 解决方案.我已经在主app.js文件中添加了建议的标题.但是仍然会给出相同的错误.
I've searched about on stackoverflow, and found THIS and THIS solutions. I've added the suggested headers in my main app.js file. But still it gives the same error.
以下是我的服务器app.js文件，在其中添加了这些标头.
Following is my servers app.js file, where I've added these headers.
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var todos = require('./routes/todos');
// load mongoose package
var mongoose = require('mongoose');
// Use native Node promises
mongoose.Promise = global.Promise;
// connect to MongoDB
mongoose.connect('mongodb://localhost/todo-api')
.then(() => console.log('connection succesful'))
.catch((err) => console.error(err));
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.use('/todos', todos);
// Add headers
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
这是网页的代码(Angularjs)，我想从这里从我的API中获取数据.
And following is the code(Angularjs) of web page, from where I want to get data from my API.
dbConnection.html
<html ng-app="demo">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
<head>
<title> dbConnection Demo</title>
</head>
<body ng-controller="db">
<div ng-repeat="product in db.products">
{{product._id}} </br>
</div>
</body>
<script>
var app = angular.module('demo', []);
app.controller('db', ['$http', function($http){
var store = this;
store.products = [];
$http({
method: 'GET',
url: 'http://localhost:4000/todos'
}).then(function (success){
store.products = success;
},function (error){
});
}]);
</script>
</html>
即使我按照答案中的建议添加了标头之后，我仍然遇到相同的错误.我在这里想念什么?我是这个领域的新手.谢谢！
Even after I've added headers as suggested in the answers, I'm getting the same error. What am I missing here? I'm completely newbie in this field. Thanks!
推荐答案
我终于找到了解决方案，方法是在路由中添加这些标头，如下所示:
I finally figured out the solution by adding those headers in my routes as following:
routes/todos.js
...
...
router.get('/', function(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // If needed
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,contenttype'); // If needed
res.setHeader('Access-Control-Allow-Credentials', true); // If needed
res.send('cors problem fixed:)');
});
这篇关于不允许本地Node.js服务器中的跨域请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
