使用ajax请求接口，跨域后cookie无法设置，全局配置ajax；及使用axios跨域后cookie无法设置，全局配置axios

问题一：

　　使用ajax/axios跨域请求接口，后端放行了，能够正常获取数据，但是cookie设置不进去，后端登录session判断失效

　　ajax解决办法：

//设置ajax属性
　　crossDomain:true　　　　　　跨域代理
　　xhrFields:{ withCredentials : true },　　　用于对本地XHR对象进行设置。一对「文件名-文件值」在本机设置XHR对象。例如，如果需要，你可以用它来为跨域请求设置XHR对象的withCredentials属性为true。　
　　 　　
　　dataType: 'json',
   corssDomain: true,
   xhrFields: { withCredentials: true },

　　axios解决办法：

// axios全局默认配置var baseUrl = '';
axios.defaults.baseURL = baseUrl;
axios.defaults.withCredentials = true;      // 允许携带cookie
axios.defaults.crossDomain = true;  
axios.defaults.dataType = 'json';

然后这样。登录cookie就能正常使用了；

问题二：因为但是项目做了一半了，发现需要给每个请求接口统一判断是否登录了，session是否过期了，所以需要全局配置ajax请求

　　ajax解决办法：

// 统一配置ajax　　　　ajaxSetup 为所有 AJAX 请求设置默认 URL 和 success 函数：
　　complete　　　　　　求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）
　　dataFilter:　　　　用于处理 XMLHttpRequest 原始响应数据的函数。预处理，在success和error函数之前
　　
$.ajaxSetup({
    dataType: 'json',
    corssDomain: true,
    xhrFields: { withCredentials: true },
    dataFilter:function(data,type){
        // console.log(data);
        var dataParse = JSON.parse(data);
        if(dataParse.code == '0'){
            return data;
        }else{
            // console.log('权限认证失败');
            var errHtml = `
                <div >
                    <div class="con">
                        <p class="txt">${dataParse.message}</p>
                        <button class="btn_close">我知道了</button>
                    </div>
                </div>
            `;
            $('body').append(errHtml);
            $('#errBox .btn_close').click(function(){
                if(dataParse.code == 'AUTH_FAIL'){
                    window.parent.location.href="../../page/login/login.html";
                }else{
                    $('#errBox').remove();
                };
            })
        }
        
    }
});

还有更多ajxaSetup的有关用法：大家可以去文档看看：http://www.runoob.com/jquery/ajax-ajaxsetup.html

axios解决办法：

axios.interceptors.response.use(
  res => {
    // 数据响应之后，要做的业务
    console.log(res);
    
    return res
  },
  error => {
    return Promise.reject(error)
  }
)

使用ajax请求接口，跨域后cookie无法设置，全局配置ajax；及使用axios跨域后cookie无法设置，全局配置axios

相关推荐