关于vue发送HTTP请求中出现问题Uncaught TypeError: Cannot read property 'jsonp' of undefined

最近在看跨域的问题，今天在为vue发送HTTP请求的时候，发现jsonp一直undefined，但是拎出来直接在html文件中运行又是可以的，经过检查，发现是因为对vue项目整体结构的不熟悉，由于网上也没有太多这个问题的信息，所以记录下来。

Uncaught TypeError: Cannot read property 'jsonp' of undefined

其实主要就是在main.js中添加声明！

import VueResource from 'vue-resource'
Vue.use(VueResource)

具体如下图：

因为是基于vue项目的，所以这里先要理解一下整体vue的框架和HTTP请求的一些内容。

1.vue.js的HTTP请求

目前主流的vue项目，都是选择axios来完成ajax请求。大型项目都会使用vuex来管理数据， 

一般使用axios发送AJAX请求--以下三种方式引入

1）npm的方式： $ npm install axios -S

2）bower的方式：$ bower install axios

3）cdn的方式：

不足：

axios本身并不支持发送跨域的请求，没有提供相应的API， 所以只能使用第三方库vue-resource.

 

2.vue整体项目结构

整体项目结构

 

图中很详细，在vue中，使用插件步骤：用vue-resource举例，

1）npm  install vue-resource -S

2）在main.js中import这个插件，这个的作用是表示在vue文件中可以使用this.$http()进行网络请求--重要，不然会报题目中的错误

import VueResource from 'vue-resource'
Vue.use(VueResource)

3.附上vue中使用JSONP解决跨域问题的源码

vue-resource中三种方式：

get

post

JSONP（支持跨域）

 
 
 
 
 
 








 Vue 请求的方式



 Get 请求 

 Post 请求 

 Jsonp 请求 









 Get 请求文件返回的结果是：{{resultMsgByGet}} 

 Post 请求PHP页面返回的结果是：{{resultMsgByPost}} 

 Jsonp 请求淘宝网页搜索数据返回的结果是： 





{{item}}