学习 jsonp 跨域

简述

[定义]

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

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

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

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

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

3. 为什么我们可以使用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');

}

});

});

后端

时代局限以及不足

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.沟通成本，需要后台人员配合
等....