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

Posted 2023-03-04

【中文标题】使用 Angular 和 Web API 2 响应 CORS 查询时缺少标头

【英文标题】：Missing headers in response of CORS query with Angular and Web API 2

【发布时间】：2018-07-25 05:49:23

【问题描述】：

我目前正在编写一个 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...)
 

【参考方案1】：

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

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

Access-Control-Expose-Headers: Authorization

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

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

【讨论】：

我将更新我的帖子，因为我已经编写了一个设置正确标题的 CorsPolicyProvider。但它不起作用......

【参考方案2】：

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

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

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

【讨论】：

感谢您的回答。服务器端没问题，因为我有一个完整的成功回调客户端。只是缺少一些标题（我具体添加的标题）。