javascript 解决跨越问题

在开发过程中, 跨越的问题, 或多或少总会遇到...那么该如何解决呢?
因为相对来说还是比较常用的, 为了避免下次使用的时候, 不用再一顿百度....就记录一下吧...

导致跨越问题的原因

因为发送 ajax 请求必须遵循 同源策略, 所以就会出现跨越的问题
同源策略就是: 域名 协议 端口 都必须相同

解决跨越的方法

• jsonp: 可以用原生js, 也可以使用第三方库(如: jQuery)
• cors: 在服务端设置指定的响应头
• nginx proxy: nginx 代理

原生JavaScript方式:

如果不行就请 设置响应头来解决跨域

// client
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://localhost/test/index.php?callback=jsonpCallback";
document.head.appendChild(script);
function jsonpCallback(data) {
    console.log(data);
}

// server
$json = json_encode(['name'=>'alex']);
echo "{$_GET['callback']}({$json})"; // jsonpCallback({name:'alex'});

此种方式,必须传递在请求参数中设置一个回调函数名, 然后在php端,用这个方法名包裹需要传递的数据

使用 jQuery 提供的 $.getJSON 方法

$.getJSON("http://localhost/test/index.php?callback=jsonpCallback", function (data) {
    console.log(data);
});

这种方式:回调方法名参数是可选的,默认就是 $.getJSON 中的第二个参数(闭包)

使用 jQuery 提供的 $.ajax 方法

$.ajax({
    url: "http://localhost/test/index.php",
    dataType: "jsonp",
    jsonp: "callback", // 指定回调方法名的key
    type: "get",
    data: {},
    success: function (data) {
        console.log(data);  // 默认是以success方法作为回调方法
    },
    error: function() {
        console.log("request error");
    }
});

此种方式, 默认是以 success 方法作为回调

注意点: JSONP 只能发送 get 类型的请求, 就算在第三中方式中指定 type: "post" 但是还是会自动转换为get 类型的请求