一、导语

  我发现好像我最近几次写文,都是在7号,很恰巧啊~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

二、正文

  最近用vue做一个订单管理混合开发APP,但是遇到个问题,使用了vueResource的post请求,后端做了跨域解决方案,可是前端还是请求不出去,最后才发现,其实还是有问题,其实踩到这个坑,根本原因,是没把form data和request payload的区别搞懂,所以建议大家还是找找资料,搞搞清楚

  1、浅谈 form data和request payload的区别

  • form date  

  get请求,是将请求参数以&方法,拼接在url后面,如:http://www.baidu.com?name=23&password=8888;

  真正可以明显看出区分的是在post请求上,

  post请求时,头文件 中Content-Type 是默认值  application/x-www-form-urlencoded,参数是放在 form date中的,如下情况

  

  • request payload

    post请求时,头文件 中Content-Type 是默认值  application/json;charset=UTF-8,参数是放在 request payload 中的。

    顺便说下 Content-Type 的参数,大家可以参考:http://tool.oschina.net/commons

  2、解决vue-resource post请求跨域问题

    

vue提供了一个简单的解决方法,就是  Vue.http.options.emulateJSON = true; 其实等同于在headers中添加  'Content-Type': 'application/x-www-form-urlencoded'

不过,更稳妥的方法是如此写:

// 在路由的请求中如此设置
Vue.http.options.emulateJSON = true
Vue.http.options.xhr = { withCredentials: true }
Vue.http.options.crossOrigin = true
Vue.http.options.emulateHTTP = true
Vue.http.options.root = URL.Purl // URL.Purl指的是服务器路径

为何要如此写呢?感谢 我在寻找这问题时,看到的文章:https://segmentfault.com/a/1190000007087934 

 效果如下:

所以大家可以愉快的这么运行vue-resource了

getShopCartList() {
this.$http.post(URL.ShopCartList, {
openId: this.openId,
userName: this.userName,
accessToken: this.accessToken,
sign: this.sign,
shopId: this.shopId
}).then(
function (response) {
this.$store.dispatch('update_loading', false)
let status = response.body.status;
if (status == 1) {
let result = response.body.result;
if (result !== null) {
this.cartGoodLis = [];
result.shopCarts.forEach((shopCartsItem) => {
if (shopCartsItem.cartItems.length == 1) {
this.cartGoodLis.push(shopCartsItem.cartItems[0])
} else {
shopCartsItem.cartItems.forEach((shopCartsItems) => {
this.cartGoodLis.push(shopCartsItems)
})
}
});
} else {
this.cartGoodLis = [];
}
} else {
// Router.verificationToUser(status, response.body.msg);
}
}
)
}

 三、 结尾

订单管理APP已经通过测试部的测试了,开心开心~~~~~~~~~~~~~~

vue初级学习--使用 vue-resource 请求数据的更多相关文章

  1. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  2. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  3. openresty 学习笔记二:获取请求数据

    openresty 学习笔记二:获取请求数据 openresty 获取POST或者GET的请求参数.这个是要用openresty 做接口必须要做的事情.这里分几种类型:GET,POST(urlenco ...

  4. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  5. vue初级学习--环境搭建

    一.导语 最近总想学点东西,es6啊.typescript啊,都想学,刚好有个机遇,可以学点vue,嗯,那就开始吧. 二.正文 1.node环境: 下载安装nodeJs,最好是1.6以上的版本,下载地 ...

  6. vue框架学习笔记(vue入门篇)

    vue框架 - 构建用户界面的渐进式框架 - 采用自底层向上增量开发的设计 - 核心库只关注视图层 - 当与单文件组件和vue生态系统支持的库结合使用时,也完全能够为复杂的单页应用程序提供驱动 - v ...

  7. Vue之resource请求数据

    导入resource文件 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js& ...

  8. Vue.js 2.0 跨域请求数据

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...

  9. vue初级学习--组件的使用(自定义组件)

    一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样 ...

随机推荐

  1. jquery之extend

    jquery的extend方法的用法1. [代码][JavaScript]代码     01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01// ...

  2. div遮罩弹框口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. 在js里UTF-8与GB2312的互转

    js的函数如下: function GB2312UTF8() { this.Dig2Dec = function(s) { var retV = 0; if (s.length == 4) { for ...

  4. Springboot框架中request.getInputStream()获取不到上传的文件流

    Springboot框架中用下面的代码,使用request.getInputStream()获取不到上传的文件流 @PostMapping("/upload_img") publi ...

  5. 【C/C++】函数指针

    首先必须要清楚如下: [1]函数指针即函数的地址,也就是存储其机器语言代码的首地址.该地址用函数名表示. [2]用具体的函数名给函数指针变量赋值时必须满足两者的类型(即函数返回值类型)和特征标(即函数 ...

  6. 静态路由配置及RIP配置实验

    [实验环境] Packet Trace 5.3 模拟软件. [实验步骤] 1.首先要进行IP地址规划.(例如下图格式) 网络名 网络地址 子网掩码 网关 主机IP vlan1 10.10.1.0 25 ...

  7. 洛谷P4092树——并查集

    题目:https://www.luogu.org/problemnew/show/P4092 利用并查集,倒序离线,那么从倒序来看被撤销标记的点就再也不会被标记,所以用并查集跳过: 莫名其妙的WA,调 ...

  8. ASoC框架

    ASoC框架分为3部分: 1. platform(用来描述芯片的DAI接口,负责数据传输): DAI:snd_soc_dai_driver, 用来表示支持哪些格式数据, 提供设置格式的函数, 启动数据 ...

  9. ubuntu下网络性能测试

    iperf的主要功能 TCP 测量网络带宽 报告MSS/MTU值的大小和观测值 支持TCP窗口值通过套接字缓冲 当P线程或Win32线程可用时,支持多线程.客户端与服务端支持同时多重连接 UDP 客户 ...

  10. button的FlatStyle和FlatAppearance属性

    FlatStyle是处理边框的样式,而FlatAppearance是用来设置边框的颜色,宽度和鼠标移动和点击时的效果设置FlatStyle为Flat,并且设置FlatAppearance下的Borde ...