note_6：vue-resource的坑

vue-resource的坑

---

参考

• 博客园：Vue—vue-cli 中的proxyTable解决开发环境中的跨域问题
• segmentFault：vue-resource的get请求，发送不了参数
• csdn：Vue resource中的GET与POST请求
• csdn：vue.resource delete 方法 传参正确方式
• segmentFault：vue下跨域设置
• 官网：postman（貌似挂了，有时能进有时进不了）

---

目录

---

一、跨域问题

• 每一次请求，服务器一直返500或者405之类的错误码，后来才发现是跨域问题。
• 针对vue的跨域问题，有一种可行的方法是修改proxy table，然而后来我才发现windows和mac版的vue-cli的编译文件里写的东西是不一样的，所以proxy table的位置也是不一样的。
• 如果是windows的，要在/config/index.js里面找到proxy-table并进行如下修改

• 如果是mac的，则在/build/webpack.dev.conf.js中找到proxy-table并进行修改。可以参照：vue下跨域设置

---

二、请求参数格式

1. GET请求

• 当get请求没有参数的时候，可以直接写

// '/api'就是前面修改proxy-table以后代替的http://kangblog
var apiStr = '/api/users'
this.$http.get(apiStr).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

• 当get请求有参数时，如果参数格式写不对，系统会报500服务器内部错误
• 参数传递的时候，要在对象前面加上params:，并且要用{}括起来。

// 假设要传递对象{"Id": int}
var indexer = parseInt(idx)

// '/api'就是前面修改proxy-table以后代替的http://kangblog
var apiStr = '/api/users'
this.$http.get(apiStr, {params:{Id: indexer}}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

2. POST请求

• 参数问题同上，如果没有写对，也是会引发系统报错
• POST写的和GET有些不同，POST是直接传对象，也不用params:

//  假设要传递一个对象
var obj = {}
obj.Id = parseInt(idx)
obj.Name = 'LiHua'
obj.Pwd = '123456'

// '/api'就是前面修改proxy-table以后代替的http://kangblog
var apiStr = '/api/users'
this.$http.post(apiStr, obj).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

不知道是什么原因，我和我同学用emualteJSON: true时都没有成功，还是报错，不管是post还是get的请求都是这样。

3. DELETE请求

• Delete请求的话，要在参数前面加上body:，外面也是要用{}括起来

// 假设要删除某段数据，需要传递对象{"Id": int}
var indexer = parseInt(id)

// '/api'就是前面修改proxy-table以后代替的http://kangblog
var apiStr = '/api/users'
this.$http.delete(apiStr, {body: {Id: indexer}}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

4. PUT请求

• put传参数的时候，什么都不用管，可以像正常那样用{}直接包着里面的内容传递

var indexer = parseInt(idx)

// '/api'就是前面修改proxy-table以后代替的http://kangblog
var apiStr = '/api/users'
this.$http.put(apiStr, {Id: indexer, Name: "LiHua", Password: "123456"}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

---

三、POSTMAN

• 可以去postman官网下载软件，也可以去谷歌应用商店下载插件
• 因为不知道插件怎么用，所以直接装的软件
• 软件登录的时候需要翻墙，登陆过之后就不需要翻了
• postman可以用来测试前面说的那几种请求，看看后台有没有反应

---