1. 跨域基础概念

1.1 什么是跨域

浏览器出于安全考虑，对不同源的请求进行限制，这就是同源策略。

1.2 同源策略要求

• 协议相同（http/https）
• 域名相同
• 端口相同

2. JSONP跨域方案

2.1 基本原理

• JSONP利用<script>标签不受同源策略限制的特性
• 通过函数调用的方式包装JSON数据
• 需要服务端配合返回特定格式的数据

2.2 实现示例

// 客户端实现
function jsonp(url, callback) {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callback}`;
    document.body.appendChild(script);
    
    // 请求完成后删除script标签
    script.onload = function() {
        document.body.removeChild(script);
    };
}

// 服务端实现（Python示例）
def jsonp_view(request):
    callback = request.GET.get('callback')
    data = {'name': 'test', 'value': 123}
    return HttpResponse(f'{callback}({json.dumps(data)})')

2.3 JSONP限制

1. 只支持GET请求
2. 需要服务器配合
3. 错误处理能力有限

3. CORS跨域方案

3.1 基本概念

CORS（Cross-Origin Resource Sharing）是W3C标准的跨域解决方案。

3.2 请求类型

简单请求

满足以下条件的请求：

Read more...