学习 jsonp 跨域

简述

[定义]

什么是跨域，CORS是什么？
跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。
当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
（其实浏览器成功发送请求并拿回了数据只是浏览器的同源策略禁止了获取）

1-1. 所谓的三项必须相同，否则引起跨域
协议域名端口号
https:// localhost :8080

协议 :
window.location.protocol
端口号 :
window.location.port

App请求接口类似于C/S不存在跨域问题。

[表现]
同源策略限制了一下行为：
1.Cookie、LocalStorage 和 IndexDB 无法读取
2.DOM 和 JS 对象无法获取
3.Ajax请求发送不出去

为什么我们可以使用JSONP的方式，来解决跨域问题？
3-1. 主要利用了标签上src的开放性原则，
以img为例，我们可以在其属性src上设置一个外网的远程图片，而不会引起跨域
以script为例，可以引用外网CDN上的jquery远程资源，提高JS加载速度，而不会跨域
3-2. 在script标签上引入的外部资源，如js文件、txt文件、PHP文件，只要其内部语法拼接为一个模仿javascript语言的字符串，script引入它后，就可以按照js代码来执行
```
   因此，我们可以利用如上两点，将函数名，params参数以get方式拼接在这个外链后面，
```

后台再返回数据的时候，返回一个函数执行操作，函数名就是get方式传递过去的参数
后台要返回要传递的真正数据，则通过函数形参的形式，传递上去。
这样，在前端定义这个函数的声明后，在后台返回代码会可以调用前端的函数，而参数也被我们拿到了，那就是后台真正要传递的数据
至此完成了一个JSONP的数据传递过程

前端

//传递参数

var vin='lgbh12e08fy367896';

//自定义的jsonp回调函数

window.testCallBack = function(data){

//处理回调

}

$("#getcarinfo").click(function(){

$.ajax({

type: "get",

async: false,

url: "http://www.runoob.com/try/ajax/jsonp.php",  //示例demo的PHP环境接口

//可以带参数传到后台

//url: "http://wenhao2018.hello2game.com/game/getDailei?bundleid=id.id.id&companycode=doctordai",

data: { vin: vin },

dataType: "jsonp",

jsonp: "jsoncallback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)

//自定义回调

//jsonpCallback: "testCallBack", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

success: function (json) { //在此之前若没有定义回调函数success_jsonpCallback2则执行下面的代码

alert(json[0]);

},

error: function () {

alert('fail');

}

});

});

后端

<?php

header('Content-type: application/json');

//获取回调函数名

$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

//json数据

$json_data = '["customername1","customername2"]';

//输出jsonp格式的数据

echo $jsoncallback . "(" . $json_data . ")";

?>

时代局限以及不足

jsonp

1.必须为GET方式传输
2.安全问题，返回字符串可能被恶意篡改
3.传输数据大小限制本身问题 --- IE浏览器4KB、主流浏览器5MB
4.在IE中存在缓存数据不同步的情况（二次访问，会优先走缓存，而不是服务器）
解决方法：
4-1. 在get请求的url中增加随机标识（推荐）
4-2. 在axios中设置header，ajax可以用setRequestHeader方法（推荐）

const api = axios.create({
    // ...
    headers: {
        'Cache-Control': 'no-cache'
    }
    // ...
})

5.沟通成本，需要后台人员配合
等....

学习 jsonp 跨域

简述

前端

后端

时代局限以及不足

推荐阅读更多精彩内容