ExpressJS,AngularJS - 跨域请求问题

Question

我正在使用ExpressJS(Node)开发一个后端RESTfull应用程序.并使用angularJS阅读.我在chrome上遇到了这个错误.

**

XMLHttpRequest无法加载http://local.dev:3000/api.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源" http://local.dev:63359 "访问.

**

注意:ExpressJS api正在使用Postman应用程序.邮差应用程序成功获取数据.

这是我的代码 ANGULARJS

$http.post("http://local.dev:3000/api",{
    "username" :'JJ',
    "email" : 'email@email.com'
}).then(function(mes){
    console.log(mes);
});

EXPRESSJS

router.get('/', function(req, res) {
    res.json({ message: 'hooray! welcome to our api!' });   
});

提前致谢.

Answer 1

这是CORS浏览器的限制.您的服务器必须使用某些标头进行响应,以告知浏览器允许跨域访问.

如果你搜索周围有一些中间件作为节点包(例如快递队)可用.但我发现有时他们不能像我想要的那样工作.所以这是我使用的那个:

app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
   res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,Cache-Control");
   if (req.method === 'OPTIONS') {
    res.statusCode = 204;
    return res.end();
  } else {
    return next();
  }
});

顺便说一下,您必须将此中间件用于您正在访问的服务器( http://local.dev:3000/api)

当尝试访问跨源资源时,浏览器将尝试发出选项请求以读取这些特殊标头并确定服务器是否允许访问.这就是为什么,对于Options请求,您可以使用'next()'直接响应而不传递流.

您还可以通过编辑Access-Control-Allow-Methods标头来编辑允许的方法列表.

Access-Control-Allow-Headers标头是可选的,您可以使用它来限制可以使用的标头.