vue-resource中的jsonp跨域请求

jsonp的用法

  jsonp请求主要是用来解决ajax跨域请求问题，使用jsonp实现跨域首先要保证服务器api支持jsonp请求的格式。

  写法格式：

this.$http.jsonp('url',[可选参数，使用{}传参]).then(成功回调函数，失败回调函数);

jsonp跨域原理

  由于当前页面所在的域名为http://localhost:63342/而请求的api于此域名不同。根据浏览器的协议，不同域名下信息数据的Ajax请求被认为是不安全的，因而浏览器会阻止这种方式的数据请求操作，故在跨域时，Ajax请求数据往往会导致失败。

  虽然浏览器会阻止Ajax的跨域请求，但根据浏览器的同源策略，其本身并不会阻止通过src的方式所进行的数据请求操作，而jsonp就是利用的此原理。

  jsonp在请求后台数据时，其本身就是在内存中创建一个

  所以Ajax请求就设计了一种叫做jsonp的形式来封装script脚本的src形式来请求数据后再解析出数据。

  jsonp要求服务器支持一个参数callback=fn的参数传递，并且服务器需要实现将返回的数据当做这个函数参数响应回来。

  正因为如此，jsonp请求实际上并不是一个真正的Ajax请求，也就是说其请求的Content-Type并不是xhr异步对象，而是一个script。

示例

源码

    
    



    

        
{{item.name}}
    

运行结果

分析

  虽然上面的示例中引用的仍然是本地的http://localhost，而并非是真实的跨域，但是这不影响这个程序的使用，实际上跨域也是这么写的，写法一模一样。

  我们知道，跨域是因为其请求的头部Content-Type是一个script，因而当我们看到该信息时，说明其就是能够实现跨域的功能。

  如下所示：