跨域

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