使用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 id="errBox">
<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的更多相关文章
- AJAX请求真的不安全么?谈谈Web安全与AJAX的关系。
开篇三问 AJAX请求真的不安全么? AJAX请求哪里不安全? 怎么样让AJAX请求更安全? 前言 本文包含的内容较多,包括AJAX,CORS,XSS,CSRF等内容,要完整的看完并理解需要付出一定的 ...
- jQuery Ajax请求(关于火狐下SyntaxError: missing ] after element list ajax返回json,var json = eval("("+data+")"); 报错)
$.ajax({ contentType: "application/x-www-form-urlencoded;charset=UTF-8" , type: &quo ...
- Ajax请求接口加密研究(针对网页前端的接口安全加密机制研究)
通常我们在h5前端调用后台接口时,一般是ajax,那么接口的安全成了一个问题. 这里可以肯定的说,前端调用的接口一定要验证! 然后剖析了微信网页版.京东网页版这些,也都是通过接口的形势绑定数据,所以在 ...
- ajax请求接口数据
var api = 'http://192.168.68.208:666/ajax/api.ashx'; // api += 'action=/api/blackhistory/list&ke ...
- jQuery中ajax请求的六种方法(三、一):$.ajax()方法
1.基础的$.ajax()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- web api 解决Ajax请求跨域问题
前端ajax请求接口时,经常出现跨域问题,当然了解决方法有很多种,比如: http://www.jb51.net/article/68424.htm 我本人恰好前后端都会一点,所以直接在接口端处理. ...
- ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)
就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...
- Session失效后所有Ajax请求跳转登录地址
当登录的Session失效后,采用ajax请求数据时会没有反应,这时候应该自动跳转到登录页面,让用户重新登录. 全局配置以下可实现 $(function() { $.ajaxSetup({ compl ...
- 使用ajax请求后返回数据显示undefinded解决办法
今天在使用七牛的sdk做断点续传时候,当文件过大,本地没有存储时候,想要通过ajax将本地信息存到服务器缓存,之后通过读取缓存的方式来完成文件过大断点续传无法使用问题. 但是在使用ajax请求的时候, ...
随机推荐
- [echarts] - echarts量化比较图表类型解析
https://echarts.baidu.com/examples/editor.html?c=watermark <!DOCTYPE html> <!--用作两种货品的参数对比- ...
- kubernets实战采坑1
1.NLog.config失效,日志ElasticSearch的Index不匹配 <?xml version="1.0" encoding="utf-8" ...
- BZOJ 1143: [CTSC2008]祭祀river(二分图最大点独立集)
http://www.lydsy.com/JudgeOnline/problem.php?id=1143 题意: 思路: 二分图最大点独立集,首先用floyd判断一下可达情况. #include< ...
- HDU 4496 D-City(逆向并查集)
http://acm.hdu.edu.cn/showproblem.php?pid=4496 题意: 给出n个顶点m条边的图,每次选择一条边删去,求每次删边后的连通块个数. 思路: 离线处理删边,从后 ...
- hihoCoder 1339 Dice Possibility(DP)
http://hihocoder.com/problemset/problem/1339 题意: 求一个骰子扔n次后最后点数相加为m的概率. 思路: f[i][j]表示扔到第i次时总值为j的概率. # ...
- 【Java】【事件处理机制】
import javax.swing.*;import java.awt.*;import java.awt.event.ActionEvent;import java.awt.event.Actio ...
- 重温js之null和undefind区别
在JavaScript中存在这样两种原始类型:Null与Undefined.这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined? Undef ...
- 深究CSS中Position的属性和特性
一.position的概念 作为布局必不可缺少的元素之一,深究其属性以及一些注意点是非常必要的. 定义:规定元素的定位类型. position属性: 属性 描述 常用性 absolute 生成绝对定位 ...
- 基于 Python 和 Pandas 的数据分析(5) --- Concatenating and Appending
这一节我们将会介绍几种不同的合并数据的方法. 在我们这个不动产投资的例子中, 我们希望获取 51 个州的房产数据, 并把它们组合起来. 我们这样做有很多原因. 这样做既便于我们做分析, 同时也可以占用 ...
- Android IPC 结篇
一.概述 Android 的 IPC 方式有 Bundle .共享文件.AIDL .Messenger .ContentProvider .Socket ,我们在实现进程间通信时要选择哪一种方式来实现 ...