Angular和Web API 2響應CORS查詢時缺少標題

Question

我目前正在編寫一個與通過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

您實際上已經到了重點。 當您從其他來源請求服務器時，導航器（Chrome）將使用OPTIONS方法發出請求（這將詢問服務器使用了哪些方法）。

例如，假設您的前端在“ http://104.131.62.190 ”上，而后端在“ http://104.131.62.195 ”上。 好吧，如果您請求使用POST方法的終結點，Chrome會向服務器發送OPTIONS方法（不包含標頭），詢問您的后端是否允許POST方法。 如果允許，則服務器發送200，Chrome將發送您的POST請求（帶有標頭），您將捕獲響應。

如果您的options方法的響應為401，則表明未正確啟用CORS。 有時，Chrome瀏覽器會要求時間配置。 此時，前端無事可做，您的解決方案在后端服務器端。

Answer 2

在您的服務器中，確保為要按角度訪問的標題添加Access-Control-Expose-Headers：[HeaderName]。

例如，為了能夠訪問angular的Authorization標頭，您的服務器也必須設置此標頭

Access-Control-Expose-Headers: Authorization

並確保在angular的http調用選項中指定'observe'：'response'

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