Axios的使用和跨域问题的解决

AXIOS的使用方法

1、下载

apache_conf
npm install axios -s

2、 导入

import axios from 'axios'//引入axios
Vue.prototype.$axios = axios;//把axios挂载到vue上

3、使用

  this.$axios({
                method:"post",
                url:"/login",
                data:{
                    form:this.ruleForm
                }
              }).then(function (resp){
                    console.log("请求成功",resp)
              }).catch(function(err){
                    console.log("请求失败",err)
              })
          }

解决跨域问题

在本地项目中，后端使用的是SpringBoot 开启127.0.0.1:80端口。
在前端，Vue使用的是127.0.0.1:8080端口。
浏览器通过127.0.0.1:8080地址获取到html页面，也就是在127.0.0.1:8080域下面，如果在当前域下面直接请求后端127.0.0.1:80地址，会产生跨域。跨域请求不成功，关键是后端发现跨域请求时，不给做出回应。

解决方法有两种:
1.后端允许跨域请求（SpringBoot使用@CrossOrigin注解，放在Controller类上）
2.前端代理请求。

这里记录一下前端代理请求，解决跨域问题的步骤：

1.导入axios之后，设置前缀

import axios from 'axios';
//设置前缀，任何使用到axios发送请求的地方，目标url都会加上这个前缀
axios.defaults.baseURL = '/api';

2.配置config/index.js文件，在proxyTable对象中添加‘/api’对象

 // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      
      '/api': {
              target:'http://localhost:80/', // 你请求的第三方接口
              changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
              ws: true,
              pathRewrite:{  // 路径重写，
                '^/api': ''  // 替换axios 请求url中的地址，也就是说^/api=/target，请求target这个地址的时候直接写成/api即可。
              }
            }
    },

3.需要注意的地方是，请求时，url中不要写ip和端口号

this.$axios({
                method:"post",
                url:"/login",//这里不要带前面的ip和端口号

总结

• 没有设置代理前我的请求是http://127.0.0.1:8080/login端口（前端Vue的地址是8080端口）
• 设置完axios.defaults.baseURL = '/api';请求变成了http://127.0.0.1:8080/api/login（请求失败，因为没有对应的接口）
• 设置config/index.js配置文件之后，代理会把^/api(^表任意) 替换成/target （proxytable设置的target项）
  也就是http://127.0.0.1:8080/api/login中http://127.0.0.1:8080/api/变成了http://localhost:80/
  代理之后的请求地址变成了http://localhost:80/login