vue cli4 axios跨域请求
1、在项目的根目录下新建一个vue.config.js
文件,内容如下:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://10.10.17.200:8080',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
2、在需要跨域的组件中,写axios请求。
created () {
axios.get('/api/getUsers').then(response => (this.userList = response.data))
.catch(function (error) { // 请求失败处理
console.log(error)
})
}
3、写后端接口代码
@RequestMapping("getUsers")
@ResponseBody
public List<User> getUsers(){
List<User> userList=new ArrayList<User>();
User user1=new User();
User user2=new User();
user1.setId(1000);
user1.setUsername("user01");
user1.setAge(18);
user1.setSex("男");
user1.setCity("广州");
user1.setPhone("188*****5878");
user2.setId(1001);
user2.setUsername("user02");
user2.setAge(20);
user2.setSex("女");
user2.setCity("上海");
user2.setPhone("189*****456");
userList.add(user1);
userList.add(user2);
return userList;
}
4、vue前端请求效果
5、最后附上前端组件完整代码
<template>
<el-container>
<el-table
:data="userList"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
>
</el-table-column>
<el-table-column
prop="username"
label="姓名"
>
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
<el-table-column
prop="city"
label="地址">
</el-table-column>
<el-table-column
prop="phone"
label="手机">
</el-table-column>
</el-table>
</el-container>
</template>
<script>
import axios from 'axios'
export default {
name: 'axios',
components: {
},
data () {
return {
userList: null
}
},
created () {
axios.get('/api/getUsers').then(response => (this.userList = response.data))
.catch(function (error) { // 请求失败处理
console.log(error)
})
}
}
</script>
注意:本实例使用了Element UI、安装方法自行百度、vue-cli、axios安装同样自行百度。