IIS 設定啟用 CORS (Cross-Origin Resource Sharing) - 跨來源資源共用

網站工程師或多或少都曾聽過 CORS (Cross-Origin Resource Sharing) - 跨來源資源共用，甚至遇到相關問題，小弟也不例外，只是以往主要都是調整 ASP.NET MVC 或是 ASP.NET WebAPI 的設定，這次同事遇到的問題則是靜態網頁，而需要調整 IIS 設定，就來看看如何設定 IIS 啟用 CORS 吧

以下內容節錄自跨來源資源共享（CORS），完整內容請參考跨來源資源共享（CORS）

跨來源資源共享（Cross-Origin Resource Sharing (CORS)）是一種使用額外 HTTP 標頭令目前瀏覽網站的用戶代理取得訪問其他來源（網域）伺服器特定資源權限的機制。當用戶代理請一個不是目前文件來源——例如來自於不同網域（domain）、通訊協定（protocol）或通訊埠（port）的資源時，會建立一個跨來源 HTTP 請求（cross-origin HTTP request）。
舉個跨來源請求的例子：`http://domain-a.com` HTML 頁面裡面一個 <img> 標籤的 src 屬性載入來自 http://domain-b.com/image.jpg 的圖片。現今網路上許多頁面所載入的資源， CSS 樣式表、圖片影像、以及指令碼（script）都來自與所在位置分離的網域，如內容傳遞網路（content delivery networks, CDN）。
基於安全性考量，程式碼所發出的跨來源 HTTP 請求會受到限制。例如，XMLHttpRequest 及 Fetch 都遵守同源政策（same-origin policy）。這代表網路應用程式所使用的 API 除非使 CORS 標頭，否則只能請求與應用程式相同網域的 HTTP 資源。

cors

跨來源資源共享（Cross-Origin Resource Sharing，簡稱 CORS）機制提供了網頁伺服器跨網域的存取控制，增加跨網域資料傳輸的安全性。現代瀏覽器支援在 API 容器（如 XMLHttpRequest 或 Fetch）中使用 CORS 以降低跨來源 HTTP 請求的風險。

實際情境說明

透過 ajax 取得其他 domain 的圖片

$(function () {
    $.ajax({
        method: "GET",
        url: "http://localhost:8011/test.png",
    });
})

IIS 未設定啟用 CORS 出現錯誤

錯誤訊息

Failed to load http://localhost:8011/test.png: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:2165' is therefore not allowed access.