1. 什么是跨域请求
跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不同时的请求。这里的域指的是这样的一个概念:我们认为如果 “协议 + 域名 + 端口号” 均相同,那么就是同域
2. 浏览器的同源策略
同源策略(Same origin policy)是一种约定,它是浏览器最核心也是最基本的安全功能。出于安全考虑,浏览器限制从JS脚本发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API都遵循同源策略。
域名、协议、端口有一个不同就不是同源,三者均相同,这两个网站才是同源
DOM 层面的同源策略:限制了来自不同源的”Document”对象或 JS 脚本,对当前“document”对象的读取或设置某些属性
Cookie和XMLHttprequest层面的同源策略:禁止 Ajax 直接发起跨域HTTP请求(其实可以发送请求,结果被浏览器拦截,不展示),同时 Ajax 请求不能携带与本网站不同源的 Cookie。
同源策略的非绝对性:< s c r i p t > < i m g > < i f r a m e > < l i n k > < v i d e o > < a u d i o > <script><img><iframe><link><video><audio><script><img><iframe><link><video><audio>等带有src属性的标签可以从不同的域加载和执行资源。
其他插件的同源策略:flash、java applet、silverlight、googlegears等浏览器加载的第三方插件也有各自的同源策略,只是这些同源策略不属于浏览器原生的同源策略,如果有漏洞则可能被黑客利用,从而留下XSS攻击的后患
因为同源策略的限制,不同协议(http、https)、域名或者端口无法直接进行JS ajax请求。 同源策略只针对于浏览器端,浏览器一旦检测到请求的结果的域名不一致后,会堵塞请求结果。这里注意,跨域请求是可以发去的,但是请求响应response被浏览器堵塞了。
那么问题又来了,如果恶意网站使用这个方法伪造一个转账请求,是不是就可以得逞了呢?答案是否定的。因为同源策略限制了不同源脚本之间的访问,也就是说恶意js脚本无法获取用户在银行网站的Cookie(网站身份验证的token会短期存放在Session中或较长期存放在Cookie中),而实际上在JS跨域请求时,浏览器既不会带跨域网站的cookie,也不会带上恶意网站的cookie。
另外,浏览器为什么仅仅限制读(即浏览器拦截请求结果)呢?一方面如果访问的是黑网站,那么网站无法跟据请求结果继续下一步的操作,如不断地猜测密码;另一方面如果访问的是白网站,block掉请求结果,应该是考虑到了请求结果可能会使得页面重定向,或者是给网页添加一个恶意的iframe之类的。
3.基于jsonp实现的跨域请求
JSONP 的缺点则是:它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求;它只支持跨域 HTTP 请求这种情况,不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题。
4.基于Cors实现的跨域请求
查看:Cors解决跨域请求
5.nginx反向代理解决跨域问题
6、Cors与JSONP的比较
JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。