前端能实现跨域嘛（web面试同源和跨域详解）
前端能实现跨域嘛（web面试同源和跨域详解）http://www.zs.com/80 端口号不同http://www.zs.com/8088同源（也叫同源策略），是浏览器中的一种安全机制2.同源的规则同源指‘三个相同’，协议相同，域名相同，端口号相同（简单来说，就是同一个网站）
前言
众所周知浏览器的同源策略及跨域的方法在前端面试中也是出场率极高的问题，本文主要跟大家分享了关于前端面试时会遇到的同源和跨域问题，下面话不多说了，来一起看看详细的介绍吧。
同源
1.同源的概念
同源（也叫同源策略），是浏览器中的一种安全机制
2.同源的规则
同源指‘三个相同’，协议相同，域名相同，端口号相同（简单来说，就是同一个网站）
http://www.zs.com/8088
http://www.zs.com/80 端口号不同
http://www.ls.com/8088 域名不同
https://www.zs.com/8088 协议不同
3.同源的目的
是为了保护用户信息的安全，防止恶意网站窃取信息
4.同源策略的限制范围（也就是不同源的情况）
cookie localStorage IndexDB无法读取
DOM无法获取
Ajax请求不能发送（并不是说请求不能发送了，而是在请求的过程中被拦截了）
注意点：同源机制的判断时机：
发送ajax请求时，不判断两个页面是否同源（可以发送请求）
浏览器也可以接收到后台响应的内容（能接收响应）
接收到响应后，浏览器才会根据同源策略判断响应内容的页面和当前页面是否是同源的，如果是同源的，请求发送成功；否则就拦截
如何进行跨域访问
怎么跨域进行AJAX请求
主要由三种方法可以绕过同源策略的限制，来进行跨域的AJAX请求。
JSONP
JSONP是客户端与服务端跨域通信的常用的方法。利用可以跨域的<script&bt;元素，向服务器请求json数据，服务端收到请求后，将数据放在一个回调函数中传回来。实现如下：
window.onload = function() { var script = document.createElement('script'); script.src = "http://example.com/callback=test"; document.appendChild(script); } function test(res) { console.log(res); }
src的callback参数是用来设置后端需要调用的回调函数的名字的，服务器返回的数据如下：
test({
"name": "王小明"
"age": 25
})
这样，前端就能跨域读取后端的数据了。但是jsopn只能发生get请求，不能发送post请求。
WebSocket
WebSocket是一种基于TCP的新的网络协议，它不实行同源策略，只要服务器支持，就可以进行跨域访问。而且WebSocket并不限于以Ajax方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息。
CORS
CORS是Access-Control-Allow-Origin（跨域资源共享）的缩写，它是一个W3C的标准。CORS需要浏览器和服务器同时支持，目前基本所有的浏览器都支持该功能。服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
document.domain
Cookie是服务器写入浏览器的信息，安全起见，只有同源的网页才能共享。但是，如果两个网页的一级域名相同，但是耳机域名不同的话，可以通过设置document.domain来共享Cookie。
比如，一个网页域名是http://w1.example.com/a.html ，另一个网页域名是http://w2.example.com/b.html ，只要给们设置相同的document.domain，这两个网页就可以共享Cookie。
postMessage API
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文档、多窗口、跨域消息传递。用postMessage()函数传递消息，目标页面监听window的message事件接收消息。利用postMessage，我们可以跨域读取LocalStorage和IndexDB还有DOM数据。
window.name
浏览器窗口有window.name的属性，该属性规定无论是否同源，只要在一个窗口里，前一个网页设置了这个属性，后一个网页就可以读取它。即在一个窗口(window)的生命周期内 窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。显然，这是可以实现跨域访问的。
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流。
学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！
