jquery中ajax处理跨域的三大方式

由于JS同源策略的影响，因此js只能访问同域名下的文档。因此要实现跨域，一般有以下几个方法： 一、处理跨域的方式： 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持 只需要在服务端填上响应头： header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受，*/ header("Access-Control-Allow-Methods:GET,POST"); 3.jsonP 原理：  ajax本身是不可以跨域的， 通过产生一个script标签来实 在JavaScript的世界里，由于安全策略的限制，浏览器执行的JavaScript代码通常受到同源策略的约束，这意味着脚本只能访问与自身URL同源的资源。然而，随着互联网应用的发展，跨域请求的需求日益增加，比如从一个网站获取另一个网站的数据。jQuery作为一款广泛使用的JavaScript库，提供了多种方式来处理跨域问题。以下是jQuery中处理跨域的三种主要方法： 1. **代理（Proxy）** 代理是绕过同源策略的一种方法。在开发环境中，可以使用像Webpack或Browserify这样的构建工具配置代理服务器，将对特定URL的请求转发到其他域。例如，如果你的前端应用运行在`localhost:3000`，你可以设置代理规则将`/api/*`的所有请求转发到远程API服务器`http://api.example.com`。 2. **CORS（Cross-Origin Resource Sharing，跨源资源共享）** HTML5引入的XMLHttpRequest Level 2（XHR2）允许浏览器在发送请求时添加`Origin`头部，服务器通过设置响应头`Access-Control-Allow-Origin`来指定哪些源可以访问。例如，设置`Access-Control-Allow-Origin:*`表示允许所有源访问。此外，还可以通过`Access-Control-Allow-Methods`指定允许的HTTP方法（如GET、POST）。这种方法在现代浏览器中普遍支持，但在IE10及以下版本不支持。 3. **JSONP（JSON with Padding）** JSONP是一种古老的跨域解决方案，它是利用`<script>`标签可以跨域加载JavaScript资源的特性。当使用jQuery的`$.ajax`方法并设置`dataType: 'jsonp'`时，jQuery会动态创建一个`<script>`标签，并将请求转换为对指定URL的GET请求，同时添加一个回调函数参数（如`jsoncallback=?`）。服务器接收到请求后，返回的不再是纯JSON，而是包裹在回调函数中的JSON数据，如`cb({key: 'value'})`。客户端的回调函数（在本例中为`cb`）会被自动调用，从而处理返回的数据。 示例代码： ```javascript // JSONP请求 $.ajax({ type: "GET", url: "http://localhost:3000/showAll", dataType: "jsonp", jsonpCallback: "cb", // 定义回调函数名 success: function(data) { console.log(data); } }); // 服务器端处理JSONP请求 app.get('/showAll', function(req, res) { res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Methods", "GET,POST"); var data = { key: 'value' }; res.send(req.query.jsoncallback + '(' + JSON.stringify(data) + ')'); }); ``` JQuery的`$.getJSON`函数也可以用于JSONP请求，只需提供一个包含回调函数名的查询字符串参数： ```javascript $.getJSON("http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?", function(json) { console.log(json[0]._name); }); ``` jQuery提供了灵活的方式来处理跨域问题，从简单的JSONP到更复杂的CORS，满足不同场景的需求。在实际开发中，选择哪种方法取决于你的目标浏览器支持、服务器端配置以及对性能和安全性的考虑。