面试官:有没遇到跨域问题,如何解决跨域?
一、同源策略
谈到跨域问题,要先谈浏览器的同源策略。
二、解决方案
1、response 添加 header
PHP为例,允许所有域名来源跨域 ,服务端添加代码:header('Access-Control-Allow-Origin: *'); 或者也可以设置当独域名或多个域名跨域访问。
这也是CORS的实现方案之一。
2、JSONP
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。
需要服务端配合。
使用Jquery的代码:
JSONP原理是啥呢?通过同源策略对script的src的允许,让加载src返回一段回调函数的代码(服务端配合)。如callbackFunction(["customername1","customername2"])。然后由页面执行该回调函数,解析出需要的数据。
Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加 <script>标签来调用服务器提供的 js脚本。当我们正常地请求一个JSON数据的时候,服务端返回的是一串 JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ,所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get !
缺点是只支持GET请求。
3、请求转发
通过nginx等代理将请求转发到目标的跨域地址,就可以绕开浏览器的跨域问题了。
三、CORS
这是插播内容。
CORS是一个W3C标准,全称是跨域资源共享(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
跨源域资源共享(CORS)机制允许 Web 应用服务器进行跨源访问控制,从而使跨源数据传输得以安全进行。
CORS与JSONP的使用目的相同,但是比JSONP更强大。
JSONP只支持GET请求,CORS支持所有类型的HTTP请求。
JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
简单来说就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域。
如何设置服务端支持CORS?
1、nginx为例,配置header
2、PHP为例,可以用header函数发送响应头支持:
四、总结
总结就是,以上三种跨域解决方案都需要服务端的配合处理。
当然解决跨域还有其他的方案,以上只是一般常用的三种。比如借助iframe标签来搞等等。WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。
欢迎指正。