axios 获取跨域cookie axios实现跨域

转载

mob64ca140caeb2 2024-08-28 08:12:34

文章标签 axios 获取跨域cookie axios get 跨域 ios Vue JSON 文章分类 iOS 移动开发

聊骚

两个多星期没写推文了，估计大家都快把我给忘了。

连续实习了十来天，晚上还得赶项目，只能咕咕咕了~~~

背景

近期团队中后台的小伙伴向我反应，说：“你就不能统一给所有请求跨域携带cookie吗？”

的确，我的请求写的很冗余，出现了很多重复的东西，也因为我熟悉jquery ajax写法的原因，我迟迟没有放弃它。

而只是单纯使用jquery ajax的话，无疑是大材小用。

如今也是时候来一波技术换新，axios真香~

介绍

前一阵子我也使用过axios，当时的想法很简单，axios更专注于数据交互。

放弃的理由也很简单，不熟悉，使用起来不顺手。

但当我再次去关注axios的时候，才发现它真的魅力四射啊！

高度可配置
高度可重用
轻量
与Vue等主流前端框架完美结合

使用

axios的用法十分简单，如下：

 axios
 
   
  
 .get(url)
 
   
  
 .then(result => {
 
   
  
 console.log(result.data)
 
   
  
 })
 
   
  
 axios
 
   
  
 .post({
 
   
  
 url: 'http://xxx.com/sendMsg',
 
   
  
 data: {
 
   
  
 name: "xuanzai"
 
   
  
 }
 
   
  
 })
 
   
  
 .then(result => {
 
   
  
 console.log(result.data)
 
   
  
 })

简单的get、post请求。

使用自定义axios实例

由于axios是一个定位为高可配置、高重用的的请求库，它能做的事情不仅如此，比如，我们可以创建一个自定义的axios实例:

 // 创建一个新axios的实例
 
   
  
 const myAxios = axios.create({
 
   
  
 baseURL: "http://myinterface.xuanzai.top/",
 
   
  
 headers: {
 
   
  
 'Content-Type': 'application/x-www-form-urlencoded'
 
   
  
 },
 
   
  
 transformRequest: [(data) => {
 
   
  
 let str = ""
 
   
  
 for(let key in data) {
 
   
  
 str += `${key}=${data[key]}&`
 
   
  
 }
 
   
  
 return str.replace(/&$/, '')
 
   
  
 }]
 
   
  
 })
 
   
  
 myAxios({
 
   
  
 url: 'sendMsg',
 
   
  
 data: {
 
   
  
 name: "旋仔",
 
   
  
 age: 20,
 
   
  
 favor: "打羽毛球"
 
   
  
 }
 
   
  
 })
 
   
  
 .then(result => {
 
   
  
 console.log(result.data)
 
   
  
 })

复用属性

复用 axios属性，以便创建自己的实例：

 // 给所有axios实例配置请求根路径
 
   
  
 axios.prototype.baseURL = 'http://myinterface.xuanzai.top/'
 
   
  
 // 给所有axios实例配置跨域携带cookie
 
   
  
 axios.defaults.withCredentials = true
 
   
  
 // 给所有axios实例配置统一的数据返回格式
 
   
  
 axios.defaults.transformResponse = [(data) => {
 
   
  
 try {
 
   
  
 return JSON.parse(data).data
 
   
  
 }catch(e) {
 
   
  
 return data
 
   
  
 }
 
   
  
 }]

融入Vue

axios融入Vue十分简单，先来创建一个http.js文件，写入如下代码:

 import axios from 'axios'
 
   
  
 // 给所有的实例配置请求根路径
 
   
  
 axios.defaults.baseURL = 'http://myinterface.xuanzai.top/'
 
   
  
 // 给所有的实例配置跨域携带cookie
 
   
  
 axios.defaults.withCredentials = true
 
   
  
 // 给所有的实例配置同一的返回数据格式
 
   
  
 axios.defaults.transformResponse = [(data) => {
 
   
  
 try {
 
   
  
 return JSON.parse(data).data
 
   
  
 }catch(e) {
 
   
  
 return data
 
   
  
 }
 
   
  
 }]
 
   
  
 // 发送数据格式为键值对
 
   
  
 const myAxios_1 = axios.create({
 
   
  
 headers: {
 
   
  
 'Content-Type': 'application/x-www-form-urlencoded'
 
   
  
 },
 
   
  
 transformRequest: [(data) => {
 
   
  
 let str = ""
 
   
  
 for(let key in data) {
 
   
  
 str += `${key}=${data[key]}&`
 
   
  
 }
 
   
  
 return str.replace(/&$/, '')
 
   
  
 }],
 
   
  
 })
 
   
  
 // 发送数据格式为JSON格式
 
   
  
 const myAxios_2 = axios.create({
 
   
  
 headers: {
 
   
  
 'Content-Type': 'application/json'
 
   
  
 },
 
   
  
 transformRequest: [(data) => {
 
   
  
 return JSON.stringify(data)
 
   
  
 }],
 
   
  
 })
 
   
  
 // 发送数据格式为文件类型
 
   
  
 const myAxios_3 = axios.create({
 
   
  
 headers: {
 
   
  
 'Content-Type': 'multipart/form-data'
 
   
  
 },
 
   
  
 transformRequest: [(data) => {
 
   
  
 const formData = new FormData()
 
   
  
 for(let key in data) {
 
   
  
 formData.append(key, data[key])
 
   
  
 }
 
   
  
 return formData
 
   
  
 }],
 
   
  
 })
 
   
  
 export default {
 
   
  
 myAxios_1,
 
   
  
 myAxios_2,
 
   
  
 myAxios_3
 
   
  
 }

在 main.js中引入：

 import http from 'http'
 
   
  
 Vue.prototype.$req_normal = http.myAxios_1
 
   
  
 Vue.prototype.$req_json = http.myAxios_2
 
   
  
 Vue.prototype.$req_file = http.myAxios_3

然后就能愉快的与后台进行数据交互啦~