JQuery 的跨域方法推荐_可跨任何网站

JQuery 提供了多种跨域请求方法，其中最常用的是 JSONP 和 CORS 。下面分别介绍这两种方法的使用。

JSONP 跨域请求

什么是 JSONP

JSONP （JSON with padding）是一种简单的跨域请求解决方案。它的原理是通过在页面中插入一个 script 标签，将数据封装在一个函数调用中返回，并由浏览器自动调用该函数。

JSONP 示例

1. 发送 JSONP 请求

$.ajax({
    url: 'https://api.unsplash.com/photos/random?client_id=YOUR_ACCESS_KEY',
    dataType: 'jsonp',
    success: function(data) {
        console.log(data);
    }
});

上面的示例中，我们通过 Unsplash API 发送了一条 JSONP 请求，并将返回的数据输出到控制台中。

1. 返回 JSONP 数据

在服务端返回的数据中，需要将数据封装在一个函数调用中，示例代码如下：

callbackFunction({
    "name": "John",
    "age": 30,
    "city": "New York"
});

其中 callbackFunction 即为前端指定的回调函数名称。

CORS 跨域请求

什么是 CORS

CORS（Cross-Origin Resource Sharing）是一种标准的跨域请求解决方案，它通过在服务端设置响应头来允许跨域请求。

CORS 示例

1. 发送 CORS 请求

$.ajax({
    url: 'https://api.github.com/repos/jquery/jquery',
    xhrFields: {
        withCredentials: true
    },
    success: function(data) {
        console.log(data);
    }
});

上面的示例中，我们通过 Github API 发送了一条 CORS 请求，并将返回的数据输出到控制台中。

1. 允许跨域请求

在服务端响应头中，需要添加 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 字段，示例代码如下：

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

其中 Access-Control-Allow-Origin 中的 * 可以替换为具体的域名。Access-Control-Allow-Credentials 表示允许发送 Cookie。

以上就是 JQuery 的跨域请求的两种常用方法，分别是 JSONP 和 CORS。在实际开发中，我们需要根据业务需求和服务端的支持情况来选择合适的方式。