前端的那些事--跨域

跨域

前端程序员，一定少不了接触跨域，在你写一个ajax请求一个网站时，发现报错提示中含有Cross-Origin，那肯定就是你遇到跨域了，不过，这个请求已经是发出去了的，服务端也接收到并处理了，但是返回的响应结果不是浏览器想要的结果，所以浏览器将这个响应的结果给拦截了，至于为什么浏览器不满意结果，就得说说同源策略

同源策略

诞生

同源策略是由NetScape提出的一个著名的安全策略。最初的 “同源策略”，主要是限制Cookie的访问，A网页设置的 Cookie，B网页无法访问，除非B网页和A网页是“同源”的。同源，指的是协议，域名，端口相同，必须三者同时一样，三者缺一者一样都属于跨域

如果没有同源的浏览器

假如你正在看浏览一个电商网站，此时你的朋友给你发了一个未成年人禁止浏览的网站，你看的很带劲，殊不知这个网站正在后台偷偷潜入你上一个登录网站，通过获取cookie来获取用户信息，此时你信息被窃取完你也不知道，你浏览的网站还没涉及交易，如果涉及金钱，那么盗取你钱财岂不是轻而易举。

同源限制了哪些行为

①：Cookie、LocalStorage 和 IndexDB 无法读取。
②：DOM 无法获得。
③：请求的响应被拦截。

同源的意义

同源策略从根本上来说是对浏览器的一种保护，浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。很多人对同源策略是有一定的误解，认为同源策略是ajax的缺陷机制，其实这是浏览器对js的一种限制。

跨域资源共享

当然不是说所有的请求都会拦截，带src,href的是允许跨资源访问

针对跨域的常用解决方案

①：jsonp

JSONP(JSON with Padding)是JSON的一种“使用模式”，浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就可以很好的解决跨域请求。

原理
动态创建script标签，然后利用script的src 不受同源策略约束来跨域获取数据。
实现
这里以node.js作为后台,express模块作为辅助

app.get("/text",(req,res)=>{
	let data = { name : req.query.name }
	res.send("callback("+JSON.stringify(data)+")")
})

前台的回调函数

function fn(res){
	console.log("名字是："+res.name)
}

原生

var script = document.createElement("script");
script.src = "loaclhost:8888/indexp.html/text?name=zhangsan&callback=fn";
document.body.appendChild(script)

JQuery

$.ajax({//前台
    type: "get",//因为是放在src中，所以只能通过GET请求方式
    url: "loaclhost:8888/indexp.html/text?name=zhangsan",
    dataType: "jsonp",//数据处理类型
    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名
    jsonpCallback:"fn",//后台处理成功前台执行的函数
    success: function(res){
        alert(res);
    }
});

②：CORS

Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。
服务端设置请求头即可，设置东西大同小异，核心无非下面三个

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type

③：代理

通过一些方法设置代理，在请求发送(接收)之前加入中间层，将不同的域名转换成相同的，就解决了跨域的问题。
客户端发送请求时，不直接到服务器，而是先到代理的中间层，中间层改装请求方的域名为同源的，再将请求发送到服务器，返回数据的时候再改回来，这样在客户端也是在相同域名下访问的了