暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

vue-cli 中axios 跨域方案

一片生活枫叶 2021-09-28
838

最近在学vue,遇到跨域问题,纠结好久,看百度的方法都是一样的,不知为什么相同的代码在我的项目中就请求不到,试验了好多次,终于成功啦!

接下来就聊聊axios,在vue-cli中的操作。


一、安装

npm install axios --save-dev

二、跨域使用

1、在config 文件夹下的index.js中配置 如下:


2、在main.js中引入并进行全局设置 如下:


3、在模板中发起请求 如下:


注意:

1. main.js$axios 可以自定义,但要和模板中的$axios 保持一样;

2. get/post 方法中一定要加上 api/ (也可以自定义) 。

3.这里的api 相当于 配置中的 target:"http://127.0.0.1/" 地址后面最好加上 /  符号,这样get()里面 的api 前面可以不用再加 /  了。


三、post 请求方法

模板中 传参 的写法要注意

  1. this.$axios.post('url',{name:'李白'}).then(fn1(),fn2())

   2.引入qs

import Qs from 'qs'

this.$axios.post('url',Qs.stringify({

        name:'李白',

        age:22

}).then(fn1(),fn2())


注意:

qs.stringify( ) 和 JSON.stringify( ) 的区别

他们解析出来的格式不一样(一个是表单格式,一个是字符串格式)

这只是目前遇到的几点问题,还有好多请求方法没研究,以后遇到再回头看看!



扫码关注
更多精彩



文章转载自一片生活枫叶,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论