跨域
跨域是指：a页面想要访问b页面，但是这两个页面的域名、端口、协议不同。而浏览器为了保证安全，只允许同源访问。所以就出现了跨域的问题。
同源策略
指ab页面域名、端口、协议一样。
解决方案
jsonp解决：jsonp利用script标签可以访问任何链接的原理，通过目标服务器设置一个callback，来进行跨域。
//Js 客户端 方法一 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript"> function jsonpCallback(result) { //alert(result); for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,b:2,etc. } } var JSONP=document.createElement("script"); JSONP.type="text/javascript"; JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback"; document.getElementsByTagName("head")[0].appendChild(JSONP); </script>
//Js 客户端 方案二 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript"> function jsonpCallback(result) { alert(result.a); alert(result.b); alert(result.c); for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,b:2,etc. } } </script> <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>
//Jq 客户端 方案二 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.ajax({ url:"http://crossdomain.com/services.php", dataType:'jsonp', data:'', jsonp:'callback', success:function(result) { for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,b:2,etc. } }, timeout:3000 }); </script>
<?php //服务端返回JSON数据 $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); $result=json_encode($arr); //echo $_GET['callback'].'("Hello,World!")'; //echo $_GET['callback']."($result)"; //动态执行回调函数 $callback=$_GET['callback']; echo $callback."($result)";
通过设置Access-Control-Allow-Origin
允许任何域名进行访问 header('Access-Control-Allow-Origin:*'); // 响应类型 header('Access-Control-Allow-Methods:POST'); // 响应头设置 header('Access-Control-Allow-Headers:x-requested-with,content-type');
也可以设置特定的域名进行访问 const ALLOW_ORIGIN = [ 'https://downfuture.com', 'http://www.downfuture.com', 'https://www.downfuture.com', 'https://www.downfuture.com:9000', 'https://downfuture.com:9000', 'downfuture.com:9000', 'localhost:9000', 'http://localhost:8080' ]; let headers = ALLOW_ORIGIN[x]; header("Access-Control-Allow-Origin", headers);
通过Nginx反向代理
server { listen 8094; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } location /apis { rewrite ^.+apis/?(.*)$ /$1 break; include uwsgi_params; proxy_pass http://localhost:1894; } }
