jQuery实现跨域

一、什么是跨域？

• 同源限制(Cross-Origin Resource Sharing, CORS)
• 是由浏览器施加的一种安全策略，禁止web页面从其它来源获取或操作部分资源
• “同源”指的是协议、主机和端口号都相同

二、为什么要跨域？

• 分离前后端工作，后端开发专注服务端逻辑，前端专注交互逻辑、视觉呈现等
• 内容安全策略 (Content Security Policy, CSP) 开发，将脚本静态资源放在CDN上，以便提高用户访问速度并减少服务器的负担
• 域名购买和管理方便，便于对域名进行风险管控和性能优化

三、常见跨域的解决方案

• JSONP
• CORS
• postMessage
• WebSocket

四、使用jQuery实现跨域

• Ajax请求，dataType设置为jsonp

$.ajax({
    url: 'http://www.example.com/api/jsonp',
    type: 'GET',
    dataType: 'jsonp',
    success: function (res) {
        console.log(res);
    },
    error: function (err) {
        console.log(err);
    }
});

• 动态创建script标签，src设置跨域的URL

var script = document.createElement('script');
script.src = 'http://www.example.com/api/jsonp?callback=myCallback';
document.head.appendChild(script);
function myCallback(res) {
    console.log(res);
    // 处理返回的数据
    document.head.removeChild(script);
}

五、示例

• JSONP

// http://www.example.com/api/jsonp?callback=myCallback
function myCallback(res) {
    console.log(res); // {id: 1, name: "example"}
}
var script = document.createElement('script');
script.src = 'http://www.example.com/api/jsonp?callback=myCallback';
document.head.appendChild(script);

• Ajax请求，dataType设置为jsonp

// http://www.example.com/api/jsonp
$.ajax({
    url: 'http://www.example.com/api/jsonp',
    type: 'GET',
    dataType: 'jsonp',
    success: function (res) {
        console.log(res); // {id: 1, name: "example"}
    },
    error: function (err) {
        console.log(err);
    }
});

以上是使用jQuery实现跨域的完整攻略，包含了常见的跨域解决方案和两条示例说明。