时间:2021-07-01 10:21:17 帮助过:3人阅读
需要引用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", "*");
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 {
- }
- }
spring resultful无法像在jsp提交表单一样处理数据必须加上@RequestBody,可以直接json转换object,但是对与没有bean的表单数据,建议转换为map对象,类似@RequestBody Map、
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。