1. 什么是跨域
  2. JSONP的原理
  3. 在Jquery中使用JSONP
  4. 在vue-resource中使用JSONP
  5. 参考

JSONP

JavaScript

JSONP(JSON with Padding)是在早期浏览器不允许跨域的背景下,诞生的 一种通信方式

什么是跨域

前端获取数据一般都通过XMLHttpRequest发送请求,但有一定的限制
在CORS之前, 浏览器不允许通过XMLHttpRequest向不同于当前域名/端口/协议的地址发送请求
另外,这种(向不同域名)发送请求的行为通常称为"跨域"

例如

当前域名 http://www.example.com/foo
允许 http://www.example.com
允许 http://www.example.com/api/foo
禁止 https://www.example.com
禁止 http://bar.example.com
禁止 https://www.example.com:4000

JSONP的原理

虽然XMLHttpRequest禁止跨域,但部分HTML元素没有这个限制,例如img script iframe等
JSONP利用了script标签可以跨域的特点,通过script标签获取JSON数据
当后端接受请求后,动态返回一段函数调用格式的源代码文本.其中的函数名为url的callback参数值,函数参数为JSON数据
例如
执行如下代码

1
2
3
4
5
6
7
8
function foo(data) {
  console.log(data)
}
// 创建一个script元素
var script = document.createElement('script')
// 设置资源地址,其中的callback参数就是将被回调的函数名  
script.src = 'https://jsonplaceholder.typicode.com/todos/1?callback=foo'
document.body.appendChild(script)

当后端收到响应时,会返回如下数据
捕获.PNG
如上图所示,后端返回一段函数调用表达式,其中的函数名就是callback参数传入的foo,而参数是JSON格式的所需数据

在Jquery中使用JSONP

普通的json

1
2
3
4
5
6
7
8
$.ajax({
    url: 'https://jsonplaceholder.typicode.com/todos/1',
    dataType: 'json',
    data: { foo: 'bar' },
    success: function(response) {
        console.log(response) 
    }
})

json发送的url
捕获.PNG
json接收到的数据
4.PNG
JSONP

1
2
3
4
5
6
7
8
9
$.ajax({
    url: 'https://jsonplaceholder.typicode.com/todos/1',
    jsonp: 'callback', 
    dataType: 'jsonp',
    data: { foo: 'bar' },
    success: function(response) {
        console.log(response) 
    }
})

JSONP发送的url
2.PNG
参数callback后面的jQuery33...就是绑在success上的函数名

JSONP收到的数据
3.PNG

在vue-resource中使用JSONP

vue-resource除了支持get post等常见请求方式外,还支持JSONP
示例
捕获.PNG

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div id="app" v-show="todo.id">{{todo}}</div>
</template>

<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
export default {
  data() {
    return { todo: {} }
  },
  methods: {
    updateTodo() {
      let url = 'https://jsonplaceholder.typicode.com/todos/1'
      this.$http.jsonp(url).then(response => {
        console.log(response)
        this.todo = response.body
        console.log(this.todo)
      })
    }
  },
  created() {
    this.updateTodo()
  }
}
</script>

如需更改callback名,则需添加'jsonp'参数
捕获.PNG

1
2
3
4
const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
this.$http.jsonp(url, {
    jsonp: 'jsonpCallback'
})

参考

浏览器的同源策略 | MDN
不要再问我跨域的问题了 - 个人文章 - SegmentFault 思否