Unity WebGL請求Http接口出現的Cors跨域問題

1.運行環境

（1）WebGL運行瀏覽器：Firfox Quantum 67.0（64位）

（2）服務端API運行環境：IIS，.Net Core 2.1 API

 

2.問題：CORS 頭缺少Access-Control-Allow-Origin

問題原因：由於瀏覽器的同源策略（了解同源策略詳見文章結尾的參考資料），不同源（不同域名）之間的交互是受限的，即跨域訪問。

解決方案：使用 CORS 允許跨源訪問。

在.Net Core 2.1 API項目的Startup.cs中設置跨域允許訪問的域名：

public void ConfigureServices(IServiceCollection services)
{
 　　services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
 　　// 跨域，允許所有域名訪問
 　　services.AddCors(options => options.AddPolicy("AllowCorsDomain", p => p.WithOrigins("*")
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials()));
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
　　if (env.IsDevelopment())
　　{
　　　　app.UseDeveloperExceptionPage();
　　}
　　app.UseMvc();
　　app.UseCors("AllowCorsDomain");
}

 

3.問題：不允許有多個 'Access-Control-Allow-Origin' CORS 頭

WebGL請求Http有兩種方式，分別位WWW和UnityWebRequest。通過兩種方式分別在Firefox瀏覽器中進行訪問，都會出現程序中無法獲取到數據的問題。通過監測發現，瀏覽器的HTTP請求是正常的，數據返回也正常，但是由於返回數據表頭中有兩個Access-Control-Allow-Origin字段，而導致WebGL無法解析到數據。

正常來說，服務器返回的數據表頭是只包含一個Access-Control-Allow-Origin字段的，那么多余的一個是怎么來的呢？通過進一步測試發現，WebGL中的兩種HTTP請求方式在請求數據發送的表頭中都包含有一個Origin字段，服務器返回的數據中也包含了這一個，故會返回兩個Access-Control-Allow-Origin。

在測試中，通過刪除請求頭中的Origin字段，發現請求一切正常。但是，在Unity中，WWW和UnityWebRequest兩種請求方式都是封裝好的，默認帶了Origin字段，所以是無法刪除Origin字段的，因此在Unity中暫時無法解決該問題。

既然在Unity中無法解決該問題，那么只能在服務器端嘗試解決。

在不斷嘗試各種辦法無效后，發現在服務器端IIS中，有個HTTP響應標頭，打開一看，是關於服務器端數據包表頭的設置，OK，刪掉Access-Control-Allow-Origin的，這樣服務器將不會再返回Access-Control-Allow-Origin信息，問題解決。

 

 4.參考資料

（1）啟用 ASP.NET Core 中的跨域請求 (CORS)

（2）瀏覽器的同源策略

（3）WebGL在Firefox瀏覽器中已攔截跨源請求（CORS 頭缺少）的解決方法（服務器為IIS）