dsoframer 使用笔记
dsoframer是微软提供一款开源的用于在线编辑.调用Word.Excel.PowerPoint等的ActiveX控件. 1.层覆盖 如果需要在文档编辑区域上方覆盖一个div的话,z-index无效 ...
.net学习之Session、Cookie、手写Ajax代码以及请求流程
1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...
Esper系列(八)Method Definition、Schema
Method Definition 作用:以公共静态方法的方式去访问外部数据.   应用说明: 1.返回数据的方法必须是公共静态方法(方法参数可以有多个也可以没有): 2.如果返回一条数据或无返回数据 ...
解决Robotium测试用例crash问题
今天遇到一个棘手的问题 用robotium框架真机测试客户端时 跑到一半会crash 搜了一堆资料终于解决了 我的程序引起crash主要原因有两个: 1.用Robotium测试框架跑多个用例(写在同一 ...
SSH深度历险记(两)   Jboss+EJB一审
学习感悟:每次学习新知识.通过初审会从小事做起,获得成就感.经典Hello Workd我们成功的例子奠定了门哈,呢.非常好的理解了.Ejb的核心. 今天主要以这个小实例,来学习EJB的分布式,我们能够 ...
eclipse中集成hadoop插件
1.下载并安装eclipse2.https://github.com/winghc/hadoop2x-eclipse-plugin3.下载插件到eclipse的插件目录 4.配置hadoop安装目录  ...
Docker 创建 Bamboo6.7.1 以及与 Crowd3.3.2 实现  SSO 单点登录
目录 目录 1.介绍 1.1.什么是 Bamboo? 2.Bamboo 的官网在哪里? 3.如何下载安装? 4.对 Bamboo 进行配置 4.1.获取授权许可 4.2.一般配置 4.3.数据库配置  ...
hyperscan在低版本系统应用问题
编译环境:centos6.3 32位/64位 由于hyperscan使用许多C++11特性,在低版本系统gcc版本不能编译.后来发现在runtime时也就是hs_scan时只需要依赖libhs_run ...
JS-给对象动态添加属性
var obj = {};//用来存放获取到所填写的信息 btn.onclick = function(){ var city = input_city.value; var num = input_ ...

vue项目使用axios发送请求让ajax请求头部携带cookie

 



最近做vue项目时遇到登录权限问题，登录以后再发送的请求头部并没有携带登录后设置的cookie，导致后台无法校验其是否登录。检查发现是vue项目中使用axios发送ajax请求导致的。查看文档得知axios默认是不让ajax请求头部携带cookie的，因此，在main.js中设置如下：


import axios from 'axios'

axios.defaults.withCredentials=true;//让ajax携带cookie

Vue.prototype.$axios = axios;


 

还要做一步工作，在spring_mvc下配置：


 <!--配置跨域-->
    <mvc:cors>
        <mvc:mapping path="/**"
                     allowed-origins="http://localhost:8080"   <!--注意这里是本地端口号-->
                     allowed-methods="*"
                     allow-credentials="true"
                     allowed-headers="*"/>
    </mvc:cors>


 

 

截图：



 


 

 


 

 

 

 

 



posted @ 2019-01-15 10:22 梓鸿 阅读(...) 评论(...) 编辑 收藏

Vue2.0之后，官方不再继续维护vue-resource，尤雨溪大大推荐使用Axios用来替代Ajax。
Axios请求头中的Content-Type常见的有3种：
1.Content-Type:application/json
2.Content-Type:application/x-www-form-urlencoded
3.Content-Type:multipart/form-data
这里一个个来举例说明。
1.Content-Type: application/json
如果没有特别声明，application/json是Axios默认的Content-Type，也是我最常用的一种，它声明了请求体中的数据将会以json字符串的形式发送到后端。所以，在请求的时候，需要将需要传给后台的数据JSON序列化即可。
var params ={"range": {"length": 100,"start": 0},"branchId": '100001'};this.$axios.post("/XXXX/XXXX", params).then(data =>{//To Do
});
我们可以在谷歌浏览器F12的network中看到Request Payload，如图1所示。
图1 Axios默认Content-Type:application/json
2.Content-Type: application/x-www-form-urlencoded
Content-Type:application/x-www-form-urlencoded，则声明了请求体中的数据会以键值对(普通表单形式)发送到后端，这种类型是Ajax默认的。偶尔后端需要我要传键值对给他们，那这个时候，就需要在头部设置headers: { 'Content-Type':'application/x-www-form-urlencoded'},
然后，将请求体中的数据设置为键值对。但是我们封装的请求体一般是JSON对象，这个时候，就可以使用qs库将对象转为url参数形式。
qs是Axios默认就有的，就不需要再npm了。其作用有二：1.将url中的参数转为对象；2.将对象转为url参数形式。
import qs from 'qs';var url='userId=admin&password=hellworld';//转为对象
console.log(qs.parse(url));var person = {name:'lihua',age:18};//转为url参数形式
console.log(qs.stringify(person));
在浏览器输出如图2所示。
图2 qs的作用
我比较爱用的就是这种方法，简单粗暴，如图3所示。在谷歌浏览器F12的network中Form Data，如图4所示。
import qs from 'qs'
var data = {
"username": "admin",
"password": "123456"
}
axios({
url: '/OAuth/oauth/token',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: qs.stringify(data)
})
图3 我在工程中的对application/x-www-form-urlencoded的使用
图4 AjAx默认Content-Type:application/x-www-form-urlencoded
有一次出现的一个问题，觉得有必要记录一下。一旦使用qs库的方法，就应该注意不能对请求体中的数据使用扩展运算符。否则，你就会看到请求体种出现如图5的情况。
图5 formdata展示请求体出现神奇的现象
可以看到图3，这个request实例是从'@/plugin/axios'中定义出来的，我们去看这个'@/plugin/axios'里的请求拦截部分service.interceptors.request.use()，很容易就看出问题了，问题就出在这三个点上，如图6所示：扩展运算符将一个数组、类数组、字符串转化为用逗号分隔的序列。
图6 qs库方法的时候请勿与扩展运算符共同使用
还有一种方法就是使用URLSearchParams对象，写法如下：
let data = newURLSearchParams();
data.append('username', 'admin');
data.append('password', '123456');
axios({
url:'/OAuth/oauth/token',
method:'post',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data
})
3.Content-Type: multipart/form-data
Content-Type:multipart/form-data，则一般用来上传文件，指定传输数据为二进制数据，例如图片、mp3、文件，也可以用来上传键值对。简单写法如下：
let data= newFormData();
data.append('userfile', document.querySelector('input[type=file]').files[0]);
data.append('username', 'admin');
data.append('password', '123456');
axios({
url:'/XXXX/XXXX',
method:'post',
headers: {'Content-Type': 'multipart/form-data'},
data: data
})
大致意思就是你正常发起的一个请求，浏览器都会简单的将你提交的内容展示出来。所展示的内容只是因为Content-Type设置的不同，而并不是因为数据提交方式的不同。如果一个请求的header设置为Content-Type:application/json，那么浏览器就会以Request Payload来显示你的请求体，所以基本数据格式为JSON对象，如图1所示；如果一个请求被设置为method="post"，并且请求的header设置为Content-Type:application/x-www-form-urlencoded或者Content-Type:multipart/form-data，那么浏览器就会以Request Payload来显示你的请求体，所以基本数据格式为键值对，如图4所示。

参考文章

vue使用axios发送post请求，出现错误，服务端无法接收到参数，因为大多数的web服务器只能识别form的post的请求，即请求头Content-Type为’application/x-www-form-urlencoded‘，但是默认是applicaiton/json，所以需要自己手动设置一下，在配置文件的headers修改。

正确的参数格式   （Content-Type为’application/x-www-form-urlencoded‘）



错误的参数格式（Content-Type为’applicaiton/json‘）