简述
[定义]
- 什么是跨域，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 . ")";
?>
时代局限以及不足
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.沟通成本，需要后台人员配合
等....
