[WebApi] Cors

閱讀官方文章 -在 ASP.NET Web API 2 中啟用跨原始來源要求 後，把能理解部分筆記下來

文章內容說明

瀏覽器安全性可防止網頁對另一個網域提出 AJAX 要求。 這種限制稱為「同源策略」，可防止惡意網站從另一個網站讀取敏感性資料。 不過，有時候您可能會想要讓其他網站呼叫您的 Web API。

跨原始來源資源分享（CORS）是 W3C 標準，可讓伺服器放寬相同的來源原則。 使用 CORS，伺服器可以明確允許某些跨源要求，然而拒絕其他要求。 CORS 比先前的技術（例如JSONP）更安全且更具彈性。

範例說明

如果兩個 Url 具有相同的配置、主機和埠，則具有相同的來源，以網站 http://example.com 為範例說明

URL	結果	原因
http://example.com/foo.html	成功
http://example.com/bar.html	成功
http://example.net	失敗	不同的網域
http://example.com:9000/foo.html	失敗	不同的埠
https://example.com/foo.html	失敗	不同的配置
http://www.example.com/foo.html	失敗	不同的子域

Cors 實作範例

啟用 CORS

安裝 WebApi Cors 套件並在 WebApiConfig 內啟用 Cors

using System.Web.Http.Cors;

namespace CorsAPI
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API 設定和服務
            // Cors 設定
            var cors = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

CorsAPI

建立 CorsController

Get()、Post()、Put() 皆回傳簡易字串，但 Put() 上有設定 DisableCors Attrubute

using System.Web.Http.Cors;

namespace CorsAPI.Controllers
{
    public class CorsController : ApiController
    {
        public HttpResponseMessage Get()
        {
            return new HttpResponseMessage()
            {
                Content = new StringContent("GET: Test message")
            };
        }

        public HttpResponseMessage Post()
        {
            return new HttpResponseMessage()
            {
                Content = new StringContent("POST: Test message")
            };
        }

        [DisableCors]
        public HttpResponseMessage Put()
        {
            return new HttpResponseMessage()
            {
                Content = new StringContent("PUT: Test message")
            };
        }
    }
}

CorsMVP

要記得修正 API 位置

@{
 ViewBag.Title = "Home Page";
}

<div>
 <select id="method">
  <option value="get">GET</option>
  <option value="post">POST</option>
  <option value="put">PUT</option>
 </select>
 <input type="button" value="Try it" onclick="sendRequest()" />
 <span id='value1'>(Result)</span>
</div>

@section scripts {
 <script>
    // TODO: Replace with the URL of your WebService app
    var serviceUrl = 'http://localhost:4944//api/cors';

    function sendRequest() {
        var method = $('#method').val();

        $.ajax({
            type: method,
            url: serviceUrl
        }).done(function (data) {
            $('#value1').text(data);
        }).fail(function (jqXHR, textStatus, errorThrown) {
            $('#value1').text(jqXHR.responseText || textStatus);
        });
    }
 </script>
}

開啟 Cors 測試結果，直接把三種 Action 結果截圖放在一起

參考資料
• 在 ASP.NET Web API 2 中啟用跨原始來源要求
• [.NET] 讓WebAPI可以跨網域執行，並動態指定允許呼叫的來源網域