axios中cookie跨域及相关配置示例详解
前言
最近在跨域、cookie以及表单上传这几个方面遇到了点小问题，做个简单探究和总结。本文主要介绍了关于axios中cookie跨域及相关配置的相关内容，下面话不多说了，来一起看看详细的介绍吧。
1、带cookie请求-画个重点
axios默认是发送请求的时候不会带上cookie的，需要通过设置withCredentials:true来解决。这个时候需要注意需要后端配合设置：
- header信息Access-Control-Allow-Credentials:true
- Access-Control-Allow-Origin不可以为'*'，因为'*'会和Access-Control-Allow-Credentials:true冲突，需配置指定的地址
如果后端设置Access-Control-Allow-Origin:'*',会有如下报错信息
Failedtoloadhttp://localhost:8090/category/lists:Thevalueofthe'Access-Control-Allow-Origin'headerintheresponsemustnotbethewildcard'*'whentherequest'scredentialsmodeis'include'.Origin'http://localhost:8081'isthereforenotallowedaccess.ThecredentialsmodeofrequestsinitiatedbytheXMLHttpRequestiscontrolledbythewithCredentialsattribute.
后端配置缺一不可，否则会出错，贴上我的后端示例：
constexpress=require('express')
constapp=express()
constcors=require('cors')//此处我的项目中使用express框架，跨域使用了corsnpm插件
app.use(cors{
credentials:true,
origin:'http://localhost:8081',//web前端服务器地址
//origin:'*'//这样会出错
})
成功之后，可在请求中看到
2、我的前端项目代码的axios配置
axios统一配置，会很好的提升效率，避免bug，以及定位出bug所在（方便捕获到error信息）
建立一个单独的fetch.js封装axios请求并作为方法暴露出来
importaxiosfrom'axios'
//创建axios实例
constservice=axios.create({
baseURL:process.env.BASE_API,//node环境的不同，对应不同的baseURL
timeout:5000,//请求的超时时间
//设置默认请求头，使post请求发送的是formdata格式数据//axios的header默认的Content-Type好像是'application/json;charset=UTF-8',我的项目都是用json格式传输，如果需要更改的话，可以用这种方式修改
//headers:{
//"Content-Type":"application/x-www-form-urlencoded"
//},
withCredentials:true//允许携带cookie
})
//发送请求前处理request的数据
axios.defaults.transformRequest=[function(data){
letnewData=''
for(letkindata){
newData+=encodeURIComponent(k)+'='+encodeURIComponent(data[k])+'&'
}
returnnewData
}]
//request拦截器
service.interceptors.request.use(
config=>{
//发送请求之前，要做的业务
returnconfig
},
error=>{
//错误处理代码
returnPromise.reject(error)
}
)
//response拦截器
service.interceptors.response.use(
response=>{
//数据响应之后，要做的业务
returnresponse
},
error=>{
returnPromise.reject(error)
}
)
exportdefaultservice
如下所示，如果需要调用ajax请求
importfetchfrom'@/utils/fetch'
fetch({
method:'get',
url:'/users/list'
})
.then(res=>{
cosole.log(res)
})
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。