跨域CORS

一、跨域CORS是什麼

當一個資源從與該資源本身所在的服務器的域或端口不同的域或不同的端口請求一個資源時，瀏覽器會發起一個跨域 HTTP 請求。出於安全考慮，瀏覽器會限制從腳本內發起的跨域HTTP請求或者攔截了服務器返回內容。例如，XMLHttpRequest 和 Fetch 遵循同源策略。因此，使用 XMLHttpRequest或 Fetch 的Web應用程序只能將HTTP請求發送到其自己的域；這種安全機制是爲避免出現類似CSRF 跨站***等問題。

 

二、實現CORS

根據CORS的定義和W3C相關規範，明白了跨域的關鍵問題是在於服務端是否允許；而服務端是通過W3C所規定的相關CORS heades來實現的；相關headers如下：

Access-Control-Allow-Origin:*

該字段是必須的。它的值要麼是請求時Origin字段的值，要麼是一個*，表示接受任意域名的請求。

 

Access-Control-Allow-Methods: POST, GET, OPTIONS

該字段可選。表明服務器允許客戶端使用 POST, GET 和 OPTIONS

 

Access-Control-Allow-Headers: X-PINGOTHER, Content-Type

該字段可選。表明服務器允許請求中攜帶字段 X-PINGOTHER 與 Content-Type。

 

Access-Control-Max-Age: 86400

表明該響應的有效時間爲 86400 秒，也就是 24 小時。在有效時間內，瀏覽器無須爲同一請求再次發起預檢請求。

 

Access-Control-Allow-Credentials: true

該字段可選。它的值是一個布爾值，表示是否允許發送Cookie。

 

跨域相關規範可以照文檔：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

 

三、WCF restful實現CORS

1.

 

2.

 

 

3.在所要公開的服務類上面[CORS]，例如：

 

四、js測試

 

    <script type="text/javascript">
        $(function () {
            $("button").click(function () {                var postData = JSON.stringify({ name: "ASDF.txt", md5Code: "F006096956B5062F8EFB72AF4DF59BC2"});

                console.log(postData);

                $.ajax({
                    url: "http://127.0.0.1:16060/FileService/GetInfo",
                    headers: {
                        imUserID: "e82287ac45c14040ba8ef34b9c2dac29",
                        accessToken: "U6wJgLoAdxVXUpx5R6AdZnFW/ytU+kgnVzaejZZoSdR31lNoRmDsQz42viOP7Jtm3iz8L2COA16r9rl5YUvZPhpHAAWxLNJBWWjHGKibHYejUuerO9qoxEkb6Yi+apPf60MzfmZ+SIgwhs6UBYOx2AbTkMdywYPCgKh8Q/mlVImUz0BU6WG4QCqgdqIefGi3"
                    },
                    contentType: "application/json; charset=utf-8",
                    type: "post",
                    dataType: "json",
                    data: postData,
                    success: function (data) {
                        $("#s").html(JSON.stringify(data));
                        console.log(data);
                    },
                    error: function (e) {
                        $("#e").html(e);
                        console.log(e);
                    }
                });
            });

        });    </script>

測試結果：