实现步骤
1、后端Json服务需要加上请求头
// 指定允许其他域名访问
header("Access-Control-Allow-Origin:*");
// 响应类型
header("Access-Control-Allow-Methods:POST");
// 响应头设置
header("Access-Control-Allow-Headers:x-requested-with,content-type");
------------------------------------------如下实例-----------------------------------------------------------------------
@RequestMapping(value = "/roles",method = RequestMethod.GET)@ResponseBodypublic List<SYSRolesPojo> getRoles(HttpServletRequest request, HttpServletResponse response){String originUrl = request.getHeader("Origin");if (originUrl == null) {originUrl = request.getHeader("Referer");}if (originUrl != null) {String[] remoteUrl = originUrl.split("/");String url = remoteUrl[0] + "//" + remoteUrl[1] + remoteUrl[2];response.setHeader("Access-Control-Allow-Origin", url);}response.setHeader("Access-Control-Allow-Credentials", "true");response.setContentType("application/json;charset=UTF-8");return sysRolesService.listRoles();}
该服务从数据库查询角色数据返回一个json数组
[{
"roleID": 1,
"roleCode": "2001",
"name": "小小",
"description": null,
"pageNum": null,
"pageSize": null
}, {
"roleID": 2,
"roleCode": "2002",
"name": "经理",
"description": null,
"pageNum": null,
"pageSize": null
}, {
"roleID": 3,
"roleCode": "",
"name": "组长",
"description": null,
"pageNum": null,
"pageSize": null
}, {
"roleID": 4,
"roleCode": "",
"name": "组员",
"description": null,
"pageNum": null,
"pageSize": null
}, {
"roleID": 7,
"roleCode": "2001",
"name": "testPut",
"description": null,
"pageNum": null,
"pageSize": null
}]
2、前端vue,安装 axios和VueAxios，然后调用
（1）使用vue-cli创建项目
使用脚手架安装项目： vue init webpack test 项目是基于webpack的
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查js代码）：n
Set up unit tests（安装单元测试工具）：n
Setup e2e tests with Nightwatch（是否安装端到端测试工具）：n
Should we runnpm installfor you after the project has been created? (recommended)：回车。
(2)启动项目
进入项目目录：cd test安装项目所需要的依赖：npm install启动项目：npm run dev在浏览器中出现如下界面，说明项目创建成功
（3）停止项目，安装axios和VueAxios
使用ctrl+c 停止Npm ,运行如下命令
npm install --save --save-exact axios vue-axios
（4）修改main.js,引入包
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
（5）修改helloworld.vue,使用axios调用远程api
远程api/news/list ,可以替换为自己的api
此API由小马哥提供测试，官网/感谢小马哥的axios视频
AXIOS视频地址
<template><div class="hello"><pre>{{content}}</pre></div></template><script>export default {name: 'HelloWorld',data () {return {content: ""}},mounted(){this.axios.post("/news/list").then(body=>{this.content=body.data;});}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 {font-weight: normal;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}</style>
运行结果
可以看到成功调用远程API
如果觉得《vue使用 axios 跨域》对你有帮助，请点赞、收藏，并留下你的观点哦！
