最新消息:欢迎加入小松的QQ群一起讨论一起学习,服务器快到期了,新买了台服务器,最近要做服务器迁移

js跨域4种解决方案

前端技术 416浏览 0评论

在实际的开发中你也许会遇到js的跨域问题

js跨域4种解决方案

下面列出了一个可以通信和不能通信的情况

情况 url 结果
同一域名下 https://static.phpsong.com/a.js
https://static.phpsong.com/b.js
可以
同一域名下不同文件夹 https://static.phpsong.com/a.js
https://static.phpsong.com/js/b.js
可以
同一域名,不同端口 http://www.phpsong.com:8080/a.js
https://static.phpsong.com/b.js
不可以
同一域名,不同协议 https://static.phpsong.com/a.js
https://www.phpsong.com/b.js
不可以
域名和域名对应ip https://static.phpsong.com/a.js
http://192.168.0.2/b.js
不可以
主域相同,子域不同 https://static.phpsong.com/a.js
http://js.phpsong.com/b.js
不可以
同一域名,不同二级域名(同上) https://static.phpsong.com/a.js
http://phpsong.com/b.js
不可以
不同域名 http://www.baidu.com/a.js
https://static.phpsong.com/b.js
不可以

上面表格中不能通信的情况,实现项目中还是要通行怎么处理,那么就需要跨域
下面总结了4种ajax跨域的解决方法,实例都是使用jquery来操作的,当前域名www.phpsong.com,调用域名js.phpsong.com,根据上面的表格,必须跨域才能访问

①传统的ajax方法

js

$("#ajax").click(function(){  
     $.ajax({  
         type: "POST",  
         url: "http://js.phpsong.com/a.php",  
         data: 'name=ajax',  
         dataType:"json",  
         success: function(data){  
            alert(data.name);  
         }  
     });  
 });

a.php代码

header("Access-Control-Allow-Origin:http://www.phpsong.com");    //允许www.phpsong.com提交访问  
//header("Access-Control-Allow-Origin:*");    //允许任何访问  
echo json_encode($_POST); 

②$.getJSON

$.getJSON('http://js.phpsong.com/a.php?name=getjson&callback=?', function(data){  //没有回调函数,直接处理  
    alert(data.name);    
 });

③$.getScript

$.getScript('http://js.phpsong.com/a.php?name=getscript&callback=getdata');  //回调函数根jsonp一样

④ajax jsonp

$("#jsonp").click(function(){  
     $.ajax({  
         url: 'http://js.phpsong.com/a.php',  
         data: {name: 'jsonp'},  
         dataType: 'jsonp',  
         jsonp: 'callback',      //为服务端准备的参数  
         jsonpCallback: 'getdata',   //回调函数  
         success: function(){  
            alert("success");  
         }  
     });  
 });  
  
function getdata(data){  
 $('#Result').text(data.name);  
}

a.php

<?php  
 if(isset($_GET['name']) && isset($_GET['callback']))   //callback根js端要对应,不然会报错的  
 {  
 echo $_GET['callback']. '(' . json_encode($_GET) . ');';   //格式固定的,为什么这样,不清楚  
 }  
?>
QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» js跨域4种解决方案
本文链接地址:https://www.phpsong.com/2186.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!

网友最新评论 (1)

加载中,请稍候...
  1. 很有用,解决了我的问题
    威客网1年前 (2016-02-27)回复