既然想了解处理跨域的相关知识,那么一定已经熟悉浏览器的同源策略了,因此不再赘述,直入主题——解决跨域。
1. JSONP
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。 由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外,可以利用“<script src="远程服务网址></script>”进行跨域请求,这种使用模式就是所谓的 JSONP。
缺点:只支持 get 请求,不支持 post 请求。
2. CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器(卒)不能低于IE10(ie8通过XDomainRequest能支持CORS)。
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。虽然设置 CORS 和前端没什么关系,但是通过这种方式解决跨域问题的话,会在发送请求时出现两种情况,分别为简单请求和复杂请求,具体见阮一峰:跨域资源共享。
3. Proxy
通过代理的方式,对请求进行从定向,由于服务器之间不存在同源策略限制,因此可以解决跨域问题。而使用这种代理服务器的方式有2种,分别为:node中间件代理与nginx反向代理。其原理如图: