前置工作
需要额外安装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!"})
})
参考文档
- 简书博客 AJAX-跨域请求 https://www.jianshu.com/p/b83094c81ca9
- axios的基本用例 https://www.axios-http.cn/docs/example
- 使用 axios 访问 API https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
