|
做web开发经常会遇到跨域问题，面试中这个问题也经常会被问到。我发现很多同学知道如何解决跨域问题，但是却说不清楚到底跨域问题是怎么产生的，跨域发生的场景是什么。
有人说我会解决就行了，我管它是怎么产生的干嘛呢？如果你也是这么想的，建议你划走这篇文章。
那么，了解跨域问题是怎么产生的有什么用处呢？如果你了解他的发生原理，那么你在做设计的时候就可以尽量规避这个问题，在开发的时候就可以预先把跨域的解决方法做到系统里，而不是等到测试的时候才发现数据获取不到，再去被动补救。
下面我来说下跨域问题是怎么产生的。
因为浏览器有一个安全机制叫同源策略。同源就是指协议、域名、端口都一样，如果任意一项不一致就是不同源。简单点说就是，你的网页URL和你调用的接口URL不是一个地方的，浏览器觉得有安全风险，不想让你使用这个接口的数据。
就好像你去肯德基吃饭，非要点一碗兰州拉面，店员虽然很鄙视你，但他还是打电话给兰州拉面馆问了一下，拉面馆说不给肯德基供货，所以你没有吃到兰州拉面。这里有一个很反常的操作一定要记住，肯德基店员打电话给兰州拉面馆了，是拉面馆说不给肯德基供货的。如果拉面馆给肯德基供货，那你就能吃到拉面了。这时候，店员相当于浏览器，肯德基就相当于当前网页，你就相当于网页里的JS代码，兰州拉面馆相当于接口服务器，肯德基和兰州拉面馆不是同一个老板的，相当于不同源。兰州拉面就是接口数据。
举例说明跨域的几种情况：
如果你的页面URL是 http://www.aaa.com/zzz.htm ，那么接口地址如下几种情况
1. https://www.aaa.com/xxx （不同源，因为协议不同）
2. http://www.aaa.com:8080/xxx （不同源，因为端口不同）
3. http://www.bbb.com/xxx （不同源，因为域名不同）
4. http://abc.aaa.com/xxx （不同源，因为域名不同）
5. http://www.aaa.com/xxx （同源，协议、域名、端口均相同）
解决跨域问题有两种方法：
1. JSONP：首先我们先弄明白jsonp的原理，通俗的讲就是动态生成一个script，由于script不受同源策略的限制，就可以去请求不同域的接口了。相当于你自己买一碗兰州拉面，放到肯德基的袋子里，偷偷带到肯德基去吃。
2. CORS：跨域资源共享。就是在后台服务器端允许某个域名下的请求。相当于兰州拉面馆和肯德基签一个供货协议，拉面馆把肯德基放到他们的供货清单里。
关于跨域问题相关的学术解释，我这里就不讲了，这些资料到处都有，需要的话自己搜索即可。
|