如何使angular2在成功的预检请求之后正确地触发正确的callback

在我的angular2应用程序中,我试图做一个跨域Ajax调用。 尽pipe调用成功,但在angular2端,错误callback总是被触发,而不是成功的callback。 这里是代码:

this.http.post('http://localhost:3000/tasks/add', '["' + task + '"]', {headers: headers}).subscribe( data => null, err => alert("err"), () => alert("succ") ); 

在浏览器控制台中,我看到了这个:

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

服务器端在nodejs中实现,它包含以下内容来处理预检

 router.options('/add', (req, res, next) => { console.log('!OPTIONS'); var headers = {}; // IE8 does not allow domains to be specified, just the * // headers["Access-Control-Allow-Origin"] = req.headers.origin; headers["Access-Control-Allow-Origin"] = "*"; headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS"; headers["Access-Control-Allow-Credentials"] = false; headers["Access-Control-Max-Age"] = '86400'; // 24 hours headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept"; res.writeHead(200, headers); res.end(); }); 

上述服务器代码已成功执行,客户端确实在预检选项请求之后发送了发布请求。

我的问题是,我可以在angular2中做什么,使它触发成功的callback,它应该?

更新:

我在这里附上截图,并在Chrome中。 它的底部显示了CORS错误信息,但是上面的部分显示了请求和200一致。事实上,它确实通过了,因为我在服务器端收到了选项和发布请求。

在这里输入图像描述

更新2:

在nodejs(服务器)端尝试express,仍然是一样的。 (我的初始代码已经处理了预检选项请求 – 代码可以在本文的原始部分find,除非我的原始nodejs代码中有错误,否则express-cors不会改变任何内容。

下面是我用express-cors试过的代码,基本上和它的npm页面一样:

 var express = require('express'); var cors = require('express-cors') var router = express.Router(); router.use(cors({ allowedOrigins: [ '*' ] })) 

更新3:

谜团已揭开! 在我的原始代码中,我只在选项响应中设置了CORS标头,但是在选项请求后没有响应标签请求。 这似乎仍然允许整个过程在应用程序级别完成 – 由于服务器端确实收到了请求并处理了数据,但angular度看到错误,因为响应没有包含正确的头文件。 我修改了我的代码,不仅在选项响应中发送CORS头,而且在后期响应中,现在angular度触发成功callback。

事实上,CORS有一个专用的模块,称为cors 。 你可以像这样安装它: npm install cors

也就是说,在浏览器中没有任何事情要做,因为一切都是在跨域请求下完成的:

  • 浏览器发送Origin
  • 使用简单或预检的请求
  • 检查CORS响应标题以查看是否可以执行您的请求

这个链接可以帮助你理解CORS如何在浏览器中工作: http : //restlet.com/blog/2015/12/15/understanding-and-using-cors/

所以简而言之,这是一个服务器问题,而不是在Angular应用程序中。 您可以在Chrome开发工具“标签networking”中查看响应内容(标题),以查看响应中是否存在CORS头(简单和预检)。

您的错误消息看起来不像预检请求成功。 预检请求是由浏览器在实际请求之前自动完成的,如果预检请求导致错误,就像你的情况一样,实际的请求根本就没有被执行。

尝试在服务器上,而不是:

  headers["Access-Control-Allow-Origin"] = "http://localhost";