使用 Angular 和 Web API 2 响应 CORS 查询时缺少标头

Question

我目前正在编写一个 Angular 应用程序，它与使用 Web API 2 开发的服务器部分进行通信。

有时我想在查询的响应中添加一个特定的标头。 我已启用 CORS。

当调用来自同一个来源时，没问题，该值在响应标头中，我可以在角度方面威胁它。 当从另一个来源进行调用时，响应中的标头名称不可用。

在这两种情况下，当我通过 Chrome 中的开发人员工具检查查询时，我都会在响应中看到标题。

我做错了什么有什么想法吗？ Angular 部分有什么特别的事情要做吗？

出于测试目的，我只是在 Web API 中执行此操作：

public static void Register(HttpConfiguration config)
{
        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);
     .....
    // rest of the implementation (Routes, etc...)
    }

更新

我写了一个 ICorsPolicyProvider ：

public class IkCorsPolicyProvider : ICorsPolicyProvider
{
    private CorsPolicy CreateCorsPolicy()
    {         
       CorsPolicy policy = new CorsPolicy     
       {        
          AllowAnyMethod = true,
          AllowAnyHeader = false,
          AllowAnyOrigin = false
       };

       // Some code to get the client allowed origins
       //.....
       //

       // set the allowed origins to the policy
       foreach (string allowedOrigin in allowedOrigins)
       {
          policy.Origins.Add(allowedOrigin);
       }

       policy.Headers.Add("content-type");
       policy.Headers.Add(UserContext.Key);
       policy.ExposedHeaders.Add("content-type");
       policy.ExposedHeaders.Add(UserContext.Key);

       return policy;           
    }

   public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
       CorsPolicy policy = CreateCorsPolicy();
       return Task.FromResult(policy);
    }
}

然后在注册中：

public static void Register(HttpConfiguration config)
{
    config.EnableCors(new IkCorsPolicyProvider());
     .....
    // rest of the implementation (Routes, etc...)
 }

Answer 1

在您的服务器中，确保为要以角度访问的标头添加 Access-Control-Expose-Headers : [HeaderName]。

例如为了能够以角度访问授权标头，您的服务器也必须设置此标头

Access-Control-Expose-Headers: Authorization

并确保在 Angular 的 http 调用选项中指定 'observe' :'response'

https://angular.io/guide/http#reading-the-full-response

Answer 2

您实际上已经进入了重点。当您从不同来源向服务器请求时，导航器 (Chrome) 将使用 OPTIONS 方法发出请求（这将询问服务器公开了哪些方法）。

例如，假设您的前端位于“http://104.131.62.190”，而您的后端位于“http://104.131.62.195”。好吧，如果您使用 POST 方法请求端点，Chrome 将向服务器发送一个 OPTIONS 方法（不带标头），询问您的后端是否允许 POST 方法。如果允许，则服务器发送 200，Chrome 将发送您的 POST 请求（带有标头），您将收到响应。

如果您的选项方法以 401 响应，那么您的 CORS 未正确启用。有时 Chrome 会中断时间配置的请求。此时前端无事可做，您的解决方案在后端服务器端。