layui跨域问题

Posted 2023-04-23

参考技术A 在使用layui的ajax请求跨域时，发现总是提示失败

打开f12，找到跨域请求，把filter上的xhr转到all上，发现该请求发送了两次，再仔细看， 第一次请求是post，第二次请求是options

第一次请求是失败的，第二次是成功的

经过一番百度，发现跨域请求都需要这样发送两次请求，但是顺序不对，应该是options在上，post在下

经过定位，发现是layui自带的jquery有一些缺陷

于是使用了最原始的xmlHttpRequest，成功了。

假如你的options请求也是失败的

第一：请检查后台服务是否支持跨域

第二：请检查url上是否有连续两个杠，如  www.baidu.com/xxx/yyy//zzz

layui框架跨域请求携带Cookie

学习了解跨域请求携带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。



也可以设置ajax全局请求头（自定义一个请求头），参数值设置为cookie的值也可以，这样后台接口也可以直接从请求头获取cookie的值。

layui框架设置如下：

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

1. //ajax全局参数设置 OK

       $.ajaxSetup({

        xhrFields: {
            withCredentials: true
        }
    });//