一、问题描述
一般情况下我们在Vue项目中使用vue-resource这个组件请求数据的时候,可能会直接使用以下代码:
this.$http.get("https://api.douban.com//v2/movie/top250")
.then(function (reponse) {
console.log(reponse);
})
这里我们使用的是get请求方法,如果请求的是本地数据,或者说着说请求的数据没有跨域,使用get方法是没有问题的。但是如果请求的是不同域的数据,就要受到同源策略的影响,请求不成功,并抛出No 'Access-Control-Allow-Origin' 错误。比如我们使用上方的代码请求豆瓣的数据,那么就会抛出以下的错误。
二、解决方法
在Vue项目中受到同源策略的影响,使用get方法不能跨域请求数据,这个时候我们可以使用jsonp这样一种模式(或者称之为协议),来请求数据。例如我们要请求豆瓣的数据,只需将上述代码中的get给成jsonp即可:
this.$http.jsonp("https://api.douban.com//v2/movie/top250")
.then(function (reponse) {
console.log(reponse);
})
这样就可以顺利请求到豆瓣的数据:
三、补充说明
HTTP请求方法有多种:GET、POST、HEAD、OPTIONS、PUT、DELETE、TRACE、CONNECT等8种方法。我们在项目中使用最多的是GET和POST请求。
在上文中我们提到使用jsonp代替get可以实现跨域请求,但是我们要明确一点,get是请求方法,但是jsonp不是请求方法。jsonp是一种请求的协议,或者你也可以称之为模式。
而且使用jsonp代替get之后,本质上使用的还是get请求方法,因为jsonp只支持get这一种网络请求方法。关于jsonp的更多知识,推荐你阅读文章:说说JSON和JSONP,也许你会豁然开朗