JS跨域代码片段

在JavaScript中，跨域请求通常受到同源策略的限制。但是，有几种方法可以实现跨域请求。这里提供两种常见的跨域请求实现方式：JSONP和CORS（跨源资源共享）。

### JSONP（JSON with Padding）

JSONP是一种非官方的跨域数据交互协议，它允许在服务器端集成Script标签返回至客户端，通过script标签没有跨域限制的“漏洞”来实现跨域。但这种方法只能发送GET请求。

function jsonp(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 创建一个唯一的回调名，防止多次请求时回调函数名冲突
    var callbackName = 'jsonpCallback_' + Math.round(100000 * Math.random());
    window[callbackName] = function(data) {
        callback(data);
        // 移除script标签
        document.body.removeChild(script);
        // 清理全局变量
        window[callbackName] = null;
    };

    // 在url中插入callback参数
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
    document.body.appendChild(script);
}

// 使用示例
jsonp('https://example.com/data?format=json', function(data) {
    console.log(data);
});

### CORS（跨源资源共享）

CORS是现代浏览器支持的一种跨域解决方案，它允许服务器设置哪些域名可以访问它的资源。在客户端，你不需要做任何特别的处理，只要服务器支持CORS，你就可以像发送同源请求一样发送跨域请求。

但是，如果你需要在客户端手动处理CORS（比如，设置请求头或处理预检请求），你可以使用`fetch`或`XMLHttpRequest`（但`fetch`更现代、更简洁）。

使用`fetch`的示例：

fetch('https://example.com/data', {
    method: 'GET', // 或者 'POST'
    mode: 'cors', // 显式地设置跨域模式
    headers: {
        'Content-Type': 'application/json', // 根据需要设置
        // 其他需要的头信息
    },
    // 如果是POST请求，这里可以添加body
    // body: JSON.stringify({key: 'value'})
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json(); // 解析JSON
})
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error('There was a problem with your fetch operation:', error);
});

注意：在CORS中，你不需要在客户端代码中显式地处理JSONP的回调逻辑，因为这是由服务器和浏览器的CORS机制自动处理的。