Vue-axios跨域post请求

今天被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了,祝各位项目顺利☺

对了据说,这个代理方法只能在开发时使用,生产环境需要另外配置,这个的等我需要了再去研究一下吧,哈哈哈