前置工作

需要额外安装nodejs模块

npm install axios --save
npm install qs --save

目录结构

├── App.vue 
├── assets 
│ └── logo.png 
├── components 
｜├── About.vue 
│└── Home.vue
├── main.js 
└── router.js

Vue Get请求示例

以之前的笔记 Vue Router 4.x入门指南为基础，把 components/About.vue 组件展示的数据从请求后端服务的方式来获取

<template>
    <div>
        {{ info }}
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "Home",
    data() {
            return {
                info: null
         }
    },
    mounted () {
        axios.get('http://dev.onwalk.net:8000/v1/hello')
        .then( response => {
                this.info = response.data.message;
                console.log(response);
        }).catch( error => {
                console.log(error);
        });
    }
}
</script>

<style lang="stylus" scoped>
</style>

Vue Post请求示例

以之前的笔记 Vue Router 4.x入门指南为基础，把 components/Home.vue 组件展示的数据从请求后端服务的方式来获取

<template>
    <div>
        {{ info }}
    </div>
</template>

<script>
import axios from "axios";
import qs from 'qs'

export default {
    name: "Home",
    data() {
            return {
                info: null
         }
    },
    mounted () {
        let data = qs.stringify("TestGinPostAPI"); 
        axios.post('http://dev.onwalk.net:8000/v1/post', data)
        .then( response => {
                this.info = response.data.message;
                console.log(response);
        }).catch( error => {
                console.log(error);
        });
    }
}
</script>

<style lang="stylus" scoped>
</style>

跨域请求问题

出于安全原因，浏览器限制从脚本中发起的跨域HTTP请求（Cross-Origin Resource Sharing 跨源资源共享),。默认的安全限制为同源策略， 即JavaScript或Cookie只能访问同域下的内容。当一个请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域. 为解决这个问题，需要对 CROS服务器端做设置。

文中的 http://dev.onwalk.net:8000' 服务是基于 Gin的Go框架实现，这里是通过设置Http请求的Header 字段 Access-Control-Allow-Origin: * 来实现跨域访问，代码片段参考如下：

     v1.POST("/post", func(c *gin.Context) {
       c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
       message := c.PostForm("message")
       c.JSON(200, gin.H{"status": message })
     })

     v1.GET("/get", func(c *gin.Context) {
       c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
       c.JSON(http.StatusOK, gin.H{"message": "Welcome Test Go Gin Get API!"})
     })

参考文档

1. 简书博客 AJAX-跨域请求 https://www.jianshu.com/p/b83094c81ca9
2. axios的基本用例 https://www.axios-http.cn/docs/example
3. 使用 axios 访问 API https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html