跨域请求详解：JSONP、Proxy、CORS与XDR

"这篇资源是关于跨域请求的总结，主要介绍了五种方法：什么是跨域、JSONP、proxy代理、CORS以及XDR。浏览器的同源策略限制了页面发起的请求，只有协议、域名、端口完全相同的URL才能进行通信。文中详细解释了JSONP的工作原理，通过动态创建script标签实现跨域获取JSON数据，并演示了如何在实际项目中应用。" 在Web开发中，跨域请求是一个常见的问题，由于浏览器的同源策略限制，JavaScript只能访问与当前页面同源（相同协议、域名和端口）的资源。以下是对标题和描述中提到的跨域请求方法的详细说明： 1. **什么是跨域** 跨域是指一个域下的文档或脚本尝试请求另一个域下的资源。由于浏览器的安全策略，这种行为通常被禁止，除非服务器允许。 2. **JSONP(JSON with Padding)** JSONP是一种绕过同源策略的方法，主要用于GET请求。它利用`<script>`标签不受同源策略限制的特点，通过动态创建`<script>`标签，将目标服务端提供的回调函数名作为查询参数传递，服务端返回的数据包裹在这个函数内部，然后在客户端执行这个函数处理返回的数据。 示例： ```html <script> var f = function(data) { alert(data.name); }; var _script = document.createElement('script'); _script.type = "text/javascript"; _script.src = "http://localhost:8888/jsonp?callback=f"; document.head.appendChild(_script); </script> ``` 这里，`callback`参数的值是处理返回数据的函数名`f`。 3. **Proxy代理** 使用服务器端的代理，比如设置一个反向代理服务器，将前端的请求转发到目标服务器，从而避免了浏览器的同源策略限制。例如，使用Nginx或者Apache配置代理规则。 4. **CORS(Cross-Origin Resource Sharing)** CORS是现代浏览器支持的跨域解决方案，通过在服务器端设置`Access-Control-Allow-Origin`响应头来允许特定的域进行跨域请求。CORS支持所有类型的HTTP请求，包括GET、POST等，提供了更安全且可控的跨域策略。 例如，服务器端设置如下： ```http Access-Control-Allow-Origin: * ``` 允许所有域进行跨域请求，或者指定特定域： ```http Access-Control-Allow-Origin: http://example.com ``` 5. **XDR(XDomainRequest)** XDR是IE9和IE10中的一个特性，用于XMLHttpRequest的跨域请求，但不支持非简单请求（如自定义头部、PUT、DELETE等）。XDR比JSONP安全，但功能有限，且只在IE浏览器中可用，随着现代浏览器的普及，XDR已逐渐被淘汰。 以上五种方法各有优缺点，JSONP简单易用但只支持GET请求，CORS安全且灵活但需要服务器配合，Proxy代理适用于各种情况但增加了服务器负担，XDR则仅限于旧版IE浏览器。在实际项目中，开发者通常根据需求和兼容性选择合适的跨域解决方案。