今天被axios的跨域请求烧脑了,爬了很多文章终于能正常ajax了,在此记录一下方法.
一:安装axios和qs
在项目目录中安装这两个插件
npm i axios
npm i qs
解释一下为啥要安装qs,我用的后端是原生的php.
通过axios发送的请求是payload形式的,但是例如jq,是以form 表单提交的数据.
所以会造成不处理请求请求数据,原生php后台不能处理payload数据,的情况,导致获取不到传参.
参考
Tip:使用
cnpm安装速度很快
二:导入模块
在需要ajax的vue文件中引入上面两个文件
比较详细的导入步骤
<script>import axios from 'axios'import Qs from 'qs'...</script>
三:配置代理
官方文档
这里我用原来项目配置了一个多小时没有作用,后来重新新建了一个项目测试成功.
1.在项目的根目录创建一个vue.config.js的文件(有的话就打开这个文件)
2.在里面添加代理信息
devServer: {proxy: {'/api': { // '/api'是识别符,可以随意起名target: 'http://localhost',//需要代理的域名,就是要访问的网址changeOrigin: true,pathRewrite: {'^/api' : '',//将 `识别符` 替换}}}}
配置好文件需要重新启动项目才能生效!!!!
可以参考这个配置说明
四:调用axios
<script>import axios from 'axios'import Qs from 'qs'export default {name: 'App',methods:{aaa(){//按钮点击事件axios({method: 'post',url: '/api/todolist/sql.php',//设置header *****必要*****headers: {'content-type': 'application/x-www-form-urlencoded','charset':'UTF-8'},data: {"act":"getDay",},// 处理数据 ****必要*******transformRequest: [function (data) {data = Qs.stringify(data);return data;}],}).then(res=>{console.log(res.data);})}}}</script>
这样应该就能很好的使用ajax了,祝各位项目顺利☺
对了据说,这个代理方法只能在开发时使用,生产环境需要另外配置,这个的等我需要了再去研究一下吧,哈哈哈
如果觉得《Vue-axios跨域post请求》对你有帮助，请点赞、收藏，并留下你的观点哦！
