今天在學習Angular 的HttpInterceptor 攔截器時，發現添加了新的headers鍵值之后總是報跨域錯誤。后台使用的是asp.net core。
檢查發現，在添加了新的header之后，每次請求之前都會先發送一個options請求，這個請求被后台拒絕了，所以導致報錯。我的后台跨域代碼只啟用了 AllowAnyOrigin()
方法，所以拒絕了options請求。
為什么會產生options請求呢？參考以下文章，原來是添加了header之后產生非簡單請求，所以瀏覽器會先發送一個options請求到服務器判斷一下。
跨域之由Request Method:OPTIONS初窺CORS
由於是被后台拒絕的，所以修改后台代碼就可以了。有兩種方法
1.修改startup里的ConfigureServices 和 Configure方法
ConfigureServices:
1 services.AddCors(options => 2 { 3 4 options.AddPolicy("cors", p => 5 { 6 7 p.AllowAnyOrigin(); 8 p.AllowAnyHeader(); 9 p.AllowAnyMethod(); 10 p.AllowCredentials(); 11 }); 12 });
Configure:
app.UseCors("cors");
2.僅修改Configure方法：
app.UseCors(cfg => { cfg.AllowAnyOrigin(); //對應跨域請求的地址 cfg.AllowAnyMethod(); //對應請求方法的Method cfg.AllowAnyHeader(); //對應請求方法的Headers cfg.AllowCredentials(); //對應請求的withCredentials 值 });
注意對於非簡單請求，前三個Allow方法都是必須的。