在开发过程中, 跨越的问题, 或多或少总会遇到...那么该如何解决呢?

因为相对来说还是比较常用的, 为了避免下次使用的时候, 不用再一顿百度....就记录一下吧...

导致跨越问题的原因

因为发送 ajax 请求必须遵循 同源策略, 所以就会出现跨越的问题

同源策略就是: 域名 协议 端口 都必须相同

解决跨越的方法

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

原生JavaScript方式:

如果不行就请

// clientvar 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 类型的请求