vue-resource的跨域使用

最新推荐文章于 2021-08-05 11:53:45 发布

原创最新推荐文章于 2021-08-05 11:53:45 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-resource

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-resource进行跨域请求，特别是JSONP的实现方式。首先通过npm安装vue-resource，接着详细阐述vue-resource的RESTful请求API，并重点讲解在跨域场景下如何利用jsonp进行数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先安装vue-resource：

npm install vue-resource --save

然后引入

import VueResourse from 'vue-resource';
Vue.use(VueResourse)

vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

Options

Parameter	Type	Description
url	`string`	请求的UR
body	`Object`, `FormData`, `string`	request body
headers	`Object`	request header
params	`Object`	请求的URL参数对象
method	`string`	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
timeout	`number`	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	`function(request)`	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	`function(event)`	ProgressEvent回调处理函数
credentials	`boolean`	表示跨域请求时是否需要使用凭证
emulateHTTP	`boolean`	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON	`boolean`	将request body以application/x-www-form-urlencoded content type发送

跨域时使用jsonp

this.$http.jsonp(
  'someurl',
  {
    params:{
      param1:'123456',
      param2:'7890'
    }
  }
).then((response)=>{
  console.log(response.data);
},error => {
  console.log(error)
});