小结ajax中的同源和跨域 jsonp和cors

网上的同源和跨域一般都比较复杂,最近也稍微总结了一下:

所谓同源,是浏览器的一种安全机制,作用在于保护网页数据的安全,不同源的网页之间不允许cookie dom ajax等行为

同源的条件:1.协议相同 2.域名相同 3.端口号相同

注意点:同源 浏览器对服务器的请求其实是成功的,服务器也有响应,但是因为浏览器的拦截导致报错,所以说不成功

跨域:不同源的网页之间发出请求就是跨域

如何实现跨域?jsonp(json with padding) cors

有三个标签不受同源的影响 为img link script

script最为重要,这也是jsonp的原理,利用script 的 src 不受同源策略影响 ,这里只能使用get发出请求,因为实际是动态创建script标签并设置src去请求服务器,在请求地址后拼接函数callback='函数名',从而实现跨域

以php举例子,在$_GET中,获取callback的值即可实现需求

function fn(res){

console.log(res)

}

代码 button.onclick = function(){

//创建

　　var　script = document.createElement('script');

　//赋值　

　　script.src = '地址?callback = fn'

　　//追加

　　document.body.appendChild(script);

}

php中

echo "$_GET('callback')"."(数据)";

服务端调用函数的字符串就会被执行,从而得到返回数据

当然用jQuery只需要简单的dataType : 'jsonp',写这么多原生js也是为了更好理解

最后说一下jsonp 和 cors两种解决跨域的方法

jsonp             　　　　　　cors

只支持get(数据量有限)　　　　　　　get/post

兼容性好         　　　　　　　IE10+,cors对前端友好,都不需要前端人员设置.在php中添加响应头即可(

　　　　　　　　　　　　　　　　　　　　header('Access-Control-Allow-Origin:*'); //允许所有的跨域请求

　　　　　　　　　　　　　　　　　　)

共同点:都需要后端的配合,单独的前端是完成不了跨域需求的,就算是jsonp也需要后端对callback获取,更别说cors没有前端的事了

本人才疏学浅,只会点php皮毛,举例子也都是php的,前端学徒.....