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请求以读取这些特殊标头并确定服务器是否允许访问。这就是为什么，对于Options请求，您可以直接响应而不使用'next（）'传递流程。

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

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

ExpressJS，AngularJS - 跨域请求问题

1 个答案: