什么是跨域及解决办法

Mon, 09 Sep 2019 11:39:55 +0800

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限制

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

3. CORS跨域方案

3.1 基本概念

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

3.2 请求类型

简单请求

满足以下条件的请求：

跨域 on 学无止境

什么是跨域及解决办法

1. 跨域基础概念

1.1 什么是跨域

1.2 同源策略要求

2. JSONP跨域方案

2.1 基本原理

2.2 实现示例

2.3 JSONP限制

3. CORS跨域方案

3.1 基本概念

3.2 请求类型

简单请求