无法在本地Nodejs服务器中允许跨源请求
我已经在nodejs中创建了一个本地REST API服务器，它正在从本地MongoDB数据库获取数据。我还创建了一个基本的网页，它从本地服务器请求这些数据。现在，当我试图从网页获取数据时，它会给我以下错误：
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和this解决方案。我已经在我的主app.js文件中添加了建议的标题。但它仍然给出了同样的错误。
下面是我的serversapp.js文件，我在其中添加了这些标题。
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），从那里我想从我的应用编程接口获取数据。
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>
即使在我按照答案中的建议添加了标题之后，我也会遇到同样的错误。我错过了什么？我在这个领域完全是新手。谢谢
共有3个答案
请将标题代码移动到var app=express（）之后
这意味着您必须在定义路由器之前放置它们。
var app = express();
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();
});
// Router
我最终找到了解决方案，在我的路线中添加了这些标题，如下所示：
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:)');
});
您的请求需要飞行前响应吗？如果是这样，它将试图用方法“选项”击中你的终结点，除非你已经设置了一个，否则你会看到cors问题。
因此，如果您发现起飞前响应失败，您可以添加自定义选项路由，或者潜在地使用npm cors包-https://www.npmjs.com/package/cors
npm install cors --save
在你的app.js中
var cors = require('cors')
app.options('*', cors()) // include before other routes
app.use(cors())
-
问题内容： 如何只允许本地请求进行Elasticsearch？所以命令像： 只能在localhost上运行，并要求类似： 会被拒绝？ 因为从我看来，elasticsearch默认情况下允许它。 编辑： 根据http://www.elasticsearch.org/guide/reference/modules/network.html， 您可以管理参数以允许主机。默认情况下，它设置为 问题答案：
-
在originAllow中,我正在传递我试图访问的url,但我得到以下错误, 请查找浏览器请求和响应头，响应头
-
问题内容： 在我的项目中，我需要允许其他人向我的脚本发送ajax请求。因此，外部请求可能来自其他网站和域，也可能来自浏览器扩展。 我在脚本顶部仅添加了以下两行，以使它们能够做到： 现在我的问题是：这里是否遗漏了任何安全方面的考虑？这个简单的解决方案会带来严重的问题吗？ 如果是这样，什么是更好的解决方案？ 感谢您的回复。 问题答案： 如上所述，任何人都可以随时向您的页面发送请求：因此，您需要考虑的主
-
在我的项目中，我需要允许其他人向我的脚本发送ajax请求。因此，外部请求可能来自其他网站和域，也可能来自浏览器扩展<我只是在我的脚本顶部添加了这两行，让他们完成这项任务： 现在我的问题是：这里有我错过的任何安全考虑吗？这个简单的解决方案会产生严重的问题吗？ 如果是，更好的解决方案是什么？ 感谢您的回复。
-
问题内容： 我有从本地主机运行的webapp（由于调试），它发出了跨域AJAX请求。我可以轻松地为Chrome设置标志“ –disable-web- security”，并且webapp可以在Chrome中按预期工作。但是我也需要在Windows上的Safari中执行此操作。是否有一些类似的标志，或者可以在“首选项”中的某个位置进行设置？ 感谢帮助。 问题答案： 解决方案是在服务器上设置标头。 在
-
问题内容： 测试浏览器：Chrome版本：52.0.2743.116这是一个简单的JavaScript，可以从本地打开图像文件，例如“ C：\ 002.jpg” 请给我任何合适的建议。 问题答案： 知道这有点老了，但是看到很多这样的问题… 我们在课堂上经常使用Chrome，这是处理本地文件的必备条件。 我们一直在使用的是“ Chrome浏览器的Web服务器”。启动它，选择希望使用的文件夹，然后转到