axios+跨域+携带cookie

axios的使用

  1. cmd下载
    npm i axios vue-axios
  2. 在main.js中引入
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

跨域设置

  1. 在config目录下的index.js的dev下配置
proxyTable: { //设置地址代理,跨域请求外部链接
    '/api': {
        target: 'http://00.00.00.00',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
    }
},
跨域.png
  1. 发送请求是加headers: {'Content-Type': 'application/x-www-form-urlencoded'},
this.axios({
  method: 'get/post',
  url: '',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  data: {}
}).then(function (res) {
  console.log(res.data)
}).catch(function (error) {
  console.log(error)
});

携带cookie

在main.js中加axios.defaults.withCredentials=true;见下图:

携带cookie

前后端数据交互

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios的中文文...
    李亚_45be阅读 10,009评论 1 8
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 807评论 0 0
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,129评论 0 2
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,003评论 1 4
  • jHipster - 微服务搭建 CC_简书[https://www.jianshu.com/u/be0d56c4...
    quanjj阅读 846评论 0 2