面试官：那有没遇到跨域问题，如何解决跨域？

面试官：有没遇到跨域问题，如何解决跨域？

一、同源策略

谈到跨域问题，要先谈浏览器的同源策略。

二、解决方案

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技术的一种很好的实现。

欢迎指正。