jQuery.getJSON 跨域问题解析与解决方案

基础概念

jQuery.getJSON() 是 jQuery 提供的一个便捷方法，用于通过 HTTP GET 请求从服务器加载 JSON 编码的数据。其语法为：

$.getJSON(url, [data], [callback])

跨域限制的原因

jQuery.getJSON() 确实会受到浏览器同源策略的限制，原因如下：

1. 同源策略(Same-Origin Policy)：浏览器出于安全考虑，默认禁止跨域请求
2. JSONP 的特殊性：虽然 $.getJSON() 可以用于 JSONP 请求，但需要服务器端特殊支持
3. CORS 支持：现代浏览器支持 CORS，但需要服务器端明确允许

解决方案

1. JSONP 方式

如果目标 API 支持 JSONP，可以这样使用：

$.getJSON("http://example.com/api?callback=?", function(data) {
    console.log(data);
});

注意 URL 中的 callback=?，jQuery 会自动替换 ? 为随机生成的回调函数名。

2. CORS 方式

服务器需要设置响应头：

Access-Control-Allow-Origin: *
或
Access-Control-Allow-Origin: http://yourdomain.com

前端代码不变：

$.getJSON("http://example.com/api", function(data) {
    console.log(data);
});

3. 服务器端代理

在自己的服务器上创建代理接口：

// Node.js Express 示例
app.get('/proxy', function(req, res) {
    request('http://external-api.com/data', function(error, response, body) {
        res.json(JSON.parse(body));
    });
});

前端调用自己的代理：

$.getJSON("/proxy", function(data) {
    console.log(data);
});

4. 使用 fetch API 替代

现代浏览器可以使用 fetch API 并设置 mode 为 'cors'：

fetch('http://example.com/api', {
    mode: 'cors'
})
.then(response => response.json())
.then(data => console.log(data));

应用场景选择

1. JSONP：适合老式 API，不支持 CORS 但支持 JSONP
2. CORS：现代 API 首选方案，需要服务器配合
3. 代理：当无法修改目标 API 时的解决方案
4. fetch：现代前端应用的推荐方式

注意事项

1. JSONP 只支持 GET 请求
2. CORS 复杂请求(如带自定义头)需要预检(OPTIONS)请求
3. 生产环境中应避免使用 Access-Control-Allow-Origin: *
4. 跨域请求可能涉及安全认证问题

通过以上方法，可以解决 jQuery.getJSON() 的跨域限制问题。