Vue中Axios的跨域和数据绑定应该这样玩

哈啰，各位小伙伴，我是每天进步一点点的花栗鼠小K

小K最近在学习前后端分离，需要使用前端去接收后端数据。果不其然，新手上来就是连环坑

前后端分离是什么？

首先简单聊一下什么叫前后端分离

前后端分离是一种架构模式，说通俗点就是后端项目里面看不到页面（JSP | HTML），后端给前端提供接口，前端调用后端提供的 REST 风格接口就行，前端专注写页面（HTML|JSP）和渲染（JS|CSS|各种前端框架）；后端专注写代码就行。

核心：后端提供数据，前端负责显示

那么相较于前后端不分离的项目，这种新的架构模式，必然产生一些处理上的差别

前后端不分离中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，即后端需要控制前端的展示，前端与后端的耦合度很高。

前后端分离中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果，前端与后端的耦合度相对较低。

举个栗子

我们有一个方法userRegister()，在前后端不分离的项目中,我们在HTML中调用方法，可能采取这种方式，这种方法不会跨端口访问

<li><a th:href="@{/user_register}"> <span>注册申请</span> </a></li>

但是在前后端分离项目中，可能遇到这种情况

<script>
    export default{
        methods: {
            var _this = this
        	userRegister() {
				this.axios.get("http://x.x.x.x:x/user_register")
            	.then(response =>{
                	_this.message = response.data
            	})
            	.catch(function(error){
                	console.info(error)
            	})
            }
    	}
    }
</script>

这时前后端运行在不同的端口，就要遇到跨端口访问接口

前后端分离衍生的跨域问题

在前后端不分离项目中摸爬滚打12个月的我，一上手前后端分离，就被一勾拳打的发昏：我被跨域制裁了

前端方法如下：

getTheText() {
            this.axios.get("http://localhost:6808/getAllGoods")
            .then(function(response){
                this.message = response.data
            })
            .catch(function(error){
                console.info(error)
            })
        }

于是乎，在前端调用后端接口时，小K蚌埠住了

敲黑板啦

跨域问题是浏览器同源策略限制，当前域名的Js只能读取同域下的窗口属性

而我们常见的网址一般包括协议, 域名, 端口几个部分, 在浏览器的同源策略下,协议不同域名不同端口不同都会出现跨域

浏览器的同源策略是确保浏览器安全的特别重要的一个安全策略

Vue中跨域问题完全可以通过配置代理进行解决，在小K百般查阅之下，终于找到了行之有效的解决办法

代理解决跨域问题的原因如图

代理是一个服务，作用是：监测本地的接口，当接口为需要访问外网的接口时，代理替你访问这个接口并把返回值返回给当前网页。

我的具体处理如下：

在Vue前端项目的根目录下，找到vue.config.js文件，找不到就创建之，在proxy中设置跨域

module.exports = {
  devServer: {
    proxy: {
      //配置跨域
      '/api': {
        target: 'http://127.0.0.0:6808', //这里填写项目真实的后台接口地址
        changOrigin: true, //设置允许跨域
        pathRewrite: {
          '^/api': ''
            /* 当我们在浏览器中看到请求的地址为：http://localhost:6808/api/getAllGoods 时
            因为重写了 /api ，所以实际上访问的地址是：http://127.0.0.0:6808/getAllGoods
            */
        }
      }
    }
  }
}

当网页访问localhost：8080/getAllGoods接口时，webpack会识别到这个是对外的接口并访问http://localhost:6808/getAllGoods并将结果返回

原来代码前端代码，修改如下

getTheText() {
            this.axios.get("/api/getAllGoods")
            .then(function(response){
                console.info(response.data)
                this.message = response.data
            })
            .catch(function(error){
                console.info(error)
            })
        }

配置代理之后，只需访问具体接口，故http://localhost:6808/getAllGoods改为/api/getAllGoods

然后，见证奇迹的时刻

然鹅，事情到此并没有结束，新的坑出现了！！！

# 浏览器控制台产生了新的错误
TypeError: Cannot set properties of undefined (setting 'message')
    at eval (UserView.vue?addc:30:1)

Axios的赋值问题

在对前后端的摸索中，小K使用到了vue整合的axios，使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性

<template>
    <div class="user">
        <h1 @click="getTheText">点击此处，更新数据</h1>
        <ol>
             <li  v-for="(item, index) in message" :key="item.id">{{item.goodsName}} + 第{{index+1}}条</li>
        </ol>
    </div>
</template>
<script>
export default{
    name: 'UserView',
    data() {
        return {
            message: [],
            msg: "点击此处，获取新数据"
        }
    },
    mounted() {
       this.getTheText()
    },
    methods: {
        getTheText() {
            this.axios.get("/api/getAllGoods")
            .then(function(response){
                console.info(response.data)
                this.message = response.data
            })
            .catch(function(error){
                console.info(error)
            })
        }
    }
}
</script>

小K经过多方探索，发现原因是：

在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined

这里小K找到了两种解决方案

将指向Vue对象的this赋值给外部方法定义的属性，然后在内部方法中使用该属性

getTheText() {
            var _this = this
            this.axios.get("/api/getAllGoods")
            .then(function(response){
                console.info(response.data)
                _this.message = response.data
            })
            .catch(function(error){
                console.info(error)
            })
        }

使用箭头函数

getTheText() {
            this.axios.get("/api/getAllGoods")
            .then(response => {
                console.info(response.data)
                this.message = response.data
            })
            .catch(function(error){
                console.info(error)
            })
        }