跨域

[xuya227939]

跨域

跨域是指：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;
        }
}