vue resource post请求时遇到的坑

使用 post 请求

// global Vue object
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

然而，这并不代表使用过程中不会遇到问题：(比如使用时遇到这样的报错：XMLHttpRequest cannot load XXX. Response for preflight has invalid HTTP status code 405)；这个$http请求和jquery的ajax还是有点区别，这里的post的data默认不是以form data的形式，而是request payload。解决起来倒也很简单：在vue实例中添加headers字段:

http: {
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}

或者使用 vue 方面提供的更加简单做法：

Vue.http.options.emulateJSON = true;

总结

以上所述是小编给大家介绍的vue resource post请求时遇到的坑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue resource中的GET与POST请求的实例代码

    前言:vue-resource 使用比 jQuery 更加简洁的方式实现了异步请求功能,还提供了比如 interceptors 这样处理请求过程中行为的功能.下面介绍下vue-resource中常用的GET与POST请求使用与封装方法. 访问 Github获取最新的开发文件与文档 特征: 支持 Promise API 和 URI Templates 支持请求过程中使用拦截器(interceptoers) 支持 Firefox,Chrome,Safari,Opera 和 IE9+ 非常的小(压缩后

  • vue resource post请求时遇到的坑

    使用 post 请求 // global Vue object Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // in a Vue instance this.$http.get('/someUrl', [options]).th

  • Springboot处理配置CORS跨域请求时碰到的坑

    Springboot处理配置CORS跨域请求时碰到的坑

    最近开发过程中遇到了一个问题,之前没有太注意,这里记录一下.我用的SpringBoot版本是2.0.5,在跟前端联调的时候,有个请求因为用户权限不够就被拦截器拦截了,拦截器拦截之后打印日志然后response了一个错误返回了,但是前端Vue.js一直报如下跨域的错误,但是我是配置了跨域的. has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested res

  • vue resource发送请求的几种方式

    vue resource发送请求的几种方式

    vue resource发送请求,代码如下所示: <!DOCTYPE html> <html> <head> <title>vue-resource</title> <meta charset="utf-8"> </head> <body> <div id="app"> <input type="button" value="

  • Vue resource三种请求格式和万能测试地址

    注意: 1.前端服务器测试地址的万能地址,太好用了http://jsonplaceholder.typicode.com/users,基本能响应各种请求.点击进入官网 2.这里测试只写了成功的回调函数,同时还要失败时的回调函数. HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti

  • axios+vue请求时携带cookie的方法实例

    axios+vue 请求时如何携带cookie 1,当符合同源策略时,可以直接设置 document.cookie = " 你要设置的内容 " mounted() { document.cookie = "ioiopipoadiasdasdbasdbas"; // 非跨域传递cookie 直接设置cookie即可 this.getData(); //请求的方法 }, methods: { async getData() { let data = await axio

  • Spring Boot和Vue跨域请求问题原理解析

    这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol

  • 详解基于 axios 的 Vue 项目 http 请求优化

    对于需要大量使用 http 请求的项目,我们通常会选择对 http 请求的方法进行二次封装,以便增加统一的拦截器,或者统一处理阻止重复提交之类的逻辑.Vue.js 的项目中我们选择使用了 axios 这样一个 http 库,下面也就简述下基于 axios 做的简单二次封装 依赖 首先引入 axios ,对于 ie9 这样不支持 promise 的浏览器还需引入 es6-promise 模块 require('es6-promise').polyfill(); var axios = requir

  • 利用SpringMVC过滤器解决vue跨域请求的问题

    之前写过通过注释的方法解决跨域请求的方法,需要每次都在controll类使用注解,这次通过springmvc的拦截器解决: 继承SpringMVC的类HandlerInterceptor重写preHandle方法,这个方法会在到达 controll之前调用,如下 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

  • vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cnpm install --save axios  我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下 import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mi

  • vue发送ajax请求详解

    vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护 本文为大家介绍vue使用axios发送AJAX请求 首页安装并引入axios 1.npm install axios -S        #直接下载axios组件,下载完毕后axios.js就存放在node_modules

随机推荐