Angular2到REST WebApi CORS问题

Question

我正在使用angular2前端和WebApi后端.webapi已启用CORS

var cors = new EnableCorsAttribute("*", "*", "*");
GlobalConfiguration.Configuration.EnableCors(cors);

它的工作原理,因为我有不同的网站(jQuery/Javascript)使用这个API.但是对于angular2,它没有.我收到以下消息:

对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.

也许与"预检请求"有关？

Answer 1

我在Angular2应用程序中遇到了同样的问题.如前所述,问题是在客户端发出每个请求之前,将预检请求发送到服务器.

这种请求具有OPTIONS类型,服务器有责任发回状态为200 的预检响应,并设置标头以接受来自该客户端的请求.

这是我的解决方案(快递):

// Domain you wish to allow
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'YOUR-CUSTOM-HEADERS-HERE');

// Set to true if you need the website to include cookies in  requests
res.setHeader('Access-Control-Allow-Credentials', true);

// Check if preflight request
if (req.method === 'OPTIONS') {
    res.status(200);
    res.end();
}
else {
    // Pass to next layer of middleware
    next();
}

如您所见,我设置了标头,然后在请求类型为OPTIONS时获取.在那种情况下,我发送回状态200并结束响应.

通过这种方式,客户端将获得授权,您还可以在所有请求中设置自定义标头.

Answer 2

您的错误消息表明Access-Control-Allow-Origin您的通话响应中没有.这是为此请求启用CORS所必需的.这与Angular2无关.

这是通过Origin在请求中添加标头在客户端触发的.你的请求中有这个标题吗？您是否在其他应用程序中使用了预检请求.提醒一句:

• 简单的要求.如果我们使用HTTP GET,HEAD和POST方法,则此用例适用.在POST方法的情况下,唯一的内容类型与支持以下值:text/plain,application/x-www-form-urlencoded和multipart/form-data.
• 预先请求.当"简单请求"用例不适用时,会发出第一个请求(使用HTTP OPTIONS方法)来检查在跨域请求的上下文中可以执行的操作.

也许OPTIONS请求在服务器端没有正确处理(不要返回正确的标题,......).

感兴趣的是告诉我们发生错误的请求:OPTIONS one或目标请求.您可以查看DevTools 中的Network选项卡...

有关CORS如何工作的更多详细信息,请参阅以下链接:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors

希望它对你有帮助,蒂埃里