跨域請求攜帶Cookie問題 和 layui框架的一些問題解決

詳細見：https://www.cnblogs.com/nuccch/p/7875189.html

或：https://harttle.land/2016/12/28/cors-with-cookie.html

 

學習瞭解跨域請求攜帶cookie的問題，需要從頁面和後臺兩處設置。
.net Core api後臺接口項目可在設置跨域策略處，設置響應頭Access-Control-Allow-Credentials響應頭爲"true"，
允許跨域請求攜帶cookie,還需設置Access-Control-Allow-Origin爲當前的請求域名。

正好,net core跨域策略已經全部處理好，只需在添加跨域策略時用到兩個方法,AllowCredentials()爲允許跨域憑據（包含cookie和http身份驗證方案）和
withOrigins()設置跨域請求域名。

頁面中如果用ajax發起請求，默認跨域請求不攜帶cookie,如果需要ajax發起跨域請求並攜帶cookie需設置xhrFields爲true。

從後臺和頁面兩處設置，即可完成跨域請求攜帶cookie的問題。

但layui框架的表格渲染分頁雖然支持跨域請求，但該請求不攜帶cookie，所以無法從頁面請求時攜帶cookie給後臺接口，後臺接口的cookie爲null。

又因爲layui底層使用jquey和ajax處理請求，所以可以在使用layui框架各模塊的功能之前，設置ajax全局參數帶上xhrFields爲true即可，這樣之後的ajax跨域請求都可攜帶cookie，而無需單獨設置。
這樣表格渲染請求時也帶上了cookie。

layui框架設置如下：

layui.use(['form', 'laydate', 'table', 'upload'], function () {
            var form = layui.form,
                laydate = layui.laydate,
                table = layui.table,
                upload = layui.upload,
                $ = layui.$;

//ajax全局參數設置
            $.ajaxSetup({
//              dataType : "json",
//              contentType : "application/json",
//              headers : {
//                    'Content-Type' : 'application/x-www-form-urlencoded'
//               },
//              同步
//              async:false, // 默認true，異步

                // 發送cookie
                xhrFields: {
                    withCredentials: true
                },
                // 請求發送前
                beforeSend: function () {
                    // 發送請求前，可以對data、url等處理
                },
                // 請求返回
                complete: function () {
                    // 返回數據，根據數據調轉頁面等
                }
            });

            // 渲染表數據   本來請求不帶cookie，但上面設置了ajax全局參數，所以請求可帶cookie
            table.render({
                elem: '#table',
                url: apiBaseUrl + ...
                cols: tableTitles,
                page: true
                , text: '暫無相關數據'
                , done: function (res, curr, count) {
                    layer.closeAll('loading');
                }               
            });