Angular2 到 REST WebApi CORS 问题

Question

我使用的是 angular2 前端和 WebApi 后端。webapi 启用了 CORS

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

它有效，因为我有不同的站点 (jQuery/Javascript) 使用此 api。但是对于 angular2 它没有。我收到以下消息:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

也许与“预检请求”有关？

Answer 1

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

这种请求有一个类型OPTIONS，服务器有责任发回一个预检响应，状态为 200 并设置了用于接受来自该客户端的请求的 header .

这是我的解决方案(使用 express):

// 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();
}

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

这样，客户端将获得授权，您还可以在所有请求中设置自定义 header 。