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中設置跨域容許訪問的域名：

1 public void ConfigureServices(IServiceCollection services)
2 {
3  　　services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
4  　　// 跨域，容許全部域名訪問
5  　　services.AddCors(options => options.AddPolicy("AllowCorsDomain", p => p.WithOrigins("*")
6             .AllowAnyMethod()
7             .AllowAnyHeader()
8             .AllowCredentials()));
9 }

1 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
2 {
3 　　if (env.IsDevelopment())
4 　　{
5 　　　　app.UseDeveloperExceptionPage();
6 　　}
7 　　app.UseMvc();
8 　　app.UseCors("AllowCorsDomain");
9 }

 

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）