星期一, 6月 08, 2020

[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

[WebApi] Cors-1
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 結果截圖放在一起

[WebApi] Cors-2

沒有留言:

張貼留言