vue 请求后台数据2(copy)
2023-09-11 14:17:23 时间
https://blog.csdn.net/vergilgeekopen/article/details/68954940
需要引用vue-resource
安装请参考https://github.com/pagekit/vue-resource官方文档
在入口函数中加入
import VueResource from 'vue-resource'
Vue.use(VueResource);
在package.json文件中加入
"dependencies": {
"vue": "^2.2.6",
"vue-resource":"^1.2.1"
},
请求如下
mounted: function () {
// GET /someUrl
this.$http.get('http://localhost:8088/test').then(response => {
console.log(response.data);
// get body data
// this.someData = response.body;
}, response => {
console.log("error");
});
},
注意
1.在请求接口数据时,涉及到跨域请求
出现下面错误:
XMLHttpRequest cannot load http://localhost:8088/test. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.
解决办法:在接口中设置
response.setHeader("Access-Control-Allow-Origin", "*");
- 1
2.使用jsonp请求
但是出现如下错误
Uncaught SyntaxError: Unexpected token
查看请求,数据已返回,未解决.
提交表单
<div id="app-7">
<form @submit.prevent="submit">
<div class="field">
姓名:
<input type="text"
v-model="user.username">
</div>
<div class="field">
密码:
<input type="text"
v-model="user.password">
</div>
<input type="submit"
value="提交">
</form>
</div>
methods: {
submit: function() {
var formData = JSON.stringify(this.user); // 这里才是你的表单数据
this.$http.post('http://localhost:8088/post', formData).then((response) => {
// success callback
console.log(response.data);
}, (response) => {
console.log("error");
// error callback
});
}
},
提交restful接口出现跨域请求的问题
查阅资料得知,
当contentType设置为三个常用的格式以外的格式,如“application/json”时,会先发送一个试探的OPTIONS类型的请求给服务端。在这时,单纯的在业务接口response添加Access-Control-Allow-Origin 由于还没有走到所以不会起作用。
解决方案:
在服务端增加一个拦截器
用于处理所有请求并加上允许跨域的头
public class CommonInterceptor implements HandlerInterceptor {
private List<String> excludedUrls;
public List<String> getExcludedUrls() {
return excludedUrls;
}
public void setExcludedUrls(List<String> excludedUrls) {
this.excludedUrls = excludedUrls;
}
/**
*
* 在业务处理器处理请求之前被调用 如果返回false
* 从当前的拦截器往回执行所有拦截器的afterCompletion(),
* 再退出拦截器链, 如果返回true 执行下一个拦截器,
* 直到所有的拦截器都执行完毕 再执行被拦截的Controller
* 然后进入拦截器链,
* 从最后一个拦截器往回执行所有的postHandle()
* 接着再从最后一个拦截器往回执行所有的afterCompletion()
*
* @param request
*
* @param response
*/
public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
Object handler) throws Exception {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept");
return true;
}
// 在业务处理器处理请求执行完成后,生成视图之前执行的动作
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
}
/**
*
* 在DispatcherServlet完全处理完请求后被调用
* 当有拦截器抛出异常时,
* 会从当前拦截器往回执行所有的拦截器的afterCompletion()
*
* @param request
*
* @param response
*
* @param handler
*
*/
public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
Object handler, Exception ex) throws Exception {
}
}
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue之介绍
- vue钩子生命周期
- vue.js3:用el-checkbox做复选框(vue@3.2.37 / element-plus@2.2.2)
- Vue.js
- vue.js3:图片镜像(翻转)并保存(vue@3.2.37)
- vue npm run serve/dev命令后台运行:nohup npm run serve >web.log 2>&1 & exit
- vue-element-admin后台管理模板脚手架
- 后台管理系统的权限以及vue处理权限的思路
- 一个典型的Vue应用的App.vue
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- vue项目该不该使用eslint验证?
- js jquery vue 网络请求封装 服务器 后台
- Vue:插槽属性prop的使用示例
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- Vue中vue-i18n结合vant-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- 165:vue+openlayers 利用turf实现遮罩挖洞效果
- 069:vue+openlayers 显示闪闪发光的点划线( 示例代码 )
- 测试开发之Vue学习笔记-H5实例百度音乐
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(二)vue 指令及用法举例