Jsonp解决跨域2



1、Request Type类型不同

Jsonp解决跨域2
两种请求类型:xhr、script


2、Response Headers类型不同

Response Headers不同(返回对象不一样)

一个是返回json对象,一个返回js脚本

(1)普通get1请求

Jsonp解决跨域2
普通get1请求


(2)jsonp类型get1请求

Jsonp解决跨域2
jsonp类型get1请求


3、开发者工具使用

开发者工具增加column显示

在标识为“1”的方框里面点击右键

Jsonp解决跨域2
开发者工具增加column


(1)普通get请求与jsonp请求区别

普通get请求没有callback参数,jsonp请求有callback参数

Jsonp解决跨域2
普通get请求没有callback参数,jsonp请求有callback参数

(2)普通get1请求

Jsonp解决跨域2
普通get1请求


(3)jsonp类型get1请求

jsonp类型请求,js函数中“json”字符串作为callback函数参数

Request URL:

http://localhost:8081/test/get1?callback=jQuery1113017328436089045796_1542969597043

Response:

/**/jQuery1113017328436089045796_1542969597043({"data":"get1 OK"});

Request URL: callback的值就是Response的函数名

Jsonp解决跨域2
callback的值就是Response的函数名

返回的数据作为函数的参数

Jsonp解决跨域2
返回的数据作为函数的参数

前端跟后端默认约定是callback,也可以自己约定

相关文章: