CORS 标头在 MEAN 堆栈应用程序中不起作用

Posted 2023-03-04

【中文标题】CORS 标头在 MEAN 堆栈应用程序中不起作用

【英文标题】：CORS header not working in MEAN stack application

【发布时间】：2014-09-06 03:29:09

【问题描述】：

我正在使用 MEAN 堆栈（Node.js、Express、AngularJS 和 Mongoose）开发应用程序。我对这两者有一个基本的了解。我的 API 在与我的前端不同的端口上运行，因此，我在我的 API 文件中包含了 CORS 标头。但是，Chrome 仍然给我这个错误：

XMLHttpRequest cannot load http://localhost:9000/#/.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

这是我的 API 中包含的标头：

app.all('*', function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
);

我不知道我哪里出错了。如果它有帮助，我正在尝试加载用户对象以在个人资料页面上显示信息。这是来自我的配置文件控制器的代码：

angular.module('angTestApp')
.controller('ProfileCtrl', function ($scope, $http) 
$http.get('http://localhost:8080/profile')
    .success(function (user) 
        $scope.user = user;
        console.log(user);
    );
);

编辑 如果有帮助，这是我的 server.js 文件： // server.js

// BASE SETUP
// =============================================================================

// call the packages we need
var express    = require('express');        // call express
var cors    = require('cors');
var app        = express();                 // define our app using express
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
mongoose.connect('mongodb://test:[e-mail]:27017/a3pemoGa')
var clas-s-room = require('./app/models/clas-s-room');
var article = require('./app/models/article');
var user = require('./app/models/user');


//From Tutorial
var passport = require('passport');
var flash    = require('connect-flash');

var morgan       = require('morgan');
var cookieParser = require('cookie-parser');
var session      = require('express-session');
// configure app to use bodyParser()
// this will let us get the data from a POST
app.use(bodyParser());
app.use(cors());
//app.use(express.static(__dirname + '/public'));

var port = process.env.PORT || 8080;        // set our port

// ROUTES FOR OUR API
// =============================================================================


// more routes for our API will happen here

// REGISTER OUR ROUTES -------------------------------

//From tutorial
// set up our express application
require('./app/config/passport')(passport); // pass passport for configuration
app.use(morgan('dev')); // log every request to the console
app.use(cookieParser()); // read cookies (needed for auth)
app.use(bodyParser.json()); // get information from html forms

app.set('view engine', 'ejs'); // set up ejs for templating

app.use(session( secret: 'ilovescotchscotchyscotchscotch' )); // session secret
app.use(passport.initialize());
app.use(passport.session()); // persistent login sessions
app.use(flash()); // use connect-flash for flash messages stored in session


require('./app/API/routes')(app, passport);
//require('./app/API/general');
// START THE SERVER
// =============================================================================
app.listen(port);
console.log('Magic happens on port ' + port);
//exports = module.exports = app;

【问题讨论】：

你运行的是最新的稳定版 chrome 吗？

除了在您的请求中包含正确的标头之外，您还需要配置响应 CORS 请求的服务器以允许从任何来源访问。

看看npm cors 包。它应该可以为您配置。另外，请检查您在 Chrome 中的调试工具，以确保标头实际上正在下降。

【参考方案1】：

我用棘手的解决方案解决了 cors 问题。首先使用 require "REQUEST" npm 来创建这样的抓取路径

app.get('/scrape', function (req, res) 
console.log("=============================Scrape =========================")
var url = req.body.url;
 request(url, function(error, response, html)
   if(!error)
    res.send(html)
    
);

在前端这样使用

$http.get("/scrape", 
params:  "url": "http://localhost:8080/profile" 
);

【讨论】：

感谢您的回复，但这也不起作用。我刚刚在 Chrome 的控制台中收到此错误：加载资源失败：服务器响应状态为 404（未找到）localhost:9000/scrape?url=http:%2F%2Flocalhost:8080%2Fprofile

我没有做实际的代码，你需要制作scrape的路由并请求npm来scrape需要URL并回调响应..并且404意味着localhost:8080/profile不是正确的URL