基础知识普及

在使用Ajax跨域请求时，如果设置Header的ContentType为application/json,会分两次发送请求。第一次先发送Method为OPTIONS的请求到服务器，这个请求会询问服务器支持哪些请求方法（GET,POST等），支持哪些请求头等等服务器的支持情况。等到这个请求返回后，如果原来我们准备发送的请求符合服务器的规则，那么才会继续发送第二个请求，否则会在Console中报错。为什么在跨域的时候设置ContentType为application/json时会请求两次？其实JQuery的文档对此有做说明。

对于JSONP的请求，后端可以不返回数据，但是必须返回一个方法名，并且带括号；

vue-resources

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。

文档地址：

全局配置

文档地址：

// 全局设置

Vue.http.options.root = '/root' // 设置全局http请求域名

// Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk'; // 设置全局http请求账号密码

Vue.http.options.emulateJSON = true; // 设置全局的表单数据类型为普通表单提交application/x-www-form-urlencoded

// 局部设置

new Vue({

http: {

root: '/root',

headers: {

Authorization: 'Basic YXBpOnBhc3N3b3Jk'

}

}

})

GET请求示例

methods: {

get() {

this.$http.get('api/json/',{}).then((result) => {

console.log(result)

}, (result) => {

console.log(result)

});

}

}

POST请求示例

methods: {

post() {

// this.$http.post('api/json/',{},{emulateJSON:true}).then((result) => {

this.$http.post('api/json/',{},{}).then((result) => {

console.log(result)

}, (result) => {

console.log(result)

});

}

}

JSONP请求示例

# 后端

class json(View):

def get(self, request):

print(self.request.GET)

callback = self.request.GET.get('callback')

data = {

"username": 'cce',

"password": 'caichangen'

}

return HttpResponse('%s(%s)' % (callback, data))

// 前端

methods: {

axios() {

this.$http.jsonp('api/json/'').then((result) => {

console.log(result.body)

});

}

}