同源策略

什么是同源策略？

同源策略是浏览器的一个安全功能，不同源的的js脚本在没有明确授权的情况下，不能读写对方的资源。

即： a.com下的js文件通过ajax访问b.com下的文件或数据时就会报错。

什么是 —— 源

“源” 即使资源的来源。在浏览器看来：协议、域名和端口号均相同则属于同源。

跨域问题

什么是跨域

受到浏览器的同源策略影响，不同源的脚本不能操作其他源下面的文件和数据。但在某些场合，我们的程序必需要实现操作不同源下面的对象，这就是跨域。

跨域的解决方案

关于跨域的解决方案有很多，在这里不多展开。主要例举如下两种方案：

转 “不同源” 为 “同源”

既然浏览器的同源策略限制了我们访问其他源下的对象，那么我们可以转变思路，让两个不同源的js处于同一个源下面。而我们正好可以通过nginx的反向代理实现这样一种转换。

配置文件：/home/hsiar/hsiar-green.el7/conf/nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
server {
    listen 8088;
    http_t2;
    satisfy all;
    ...
    location /frame {
        proxy_pass http://127.0.0.1:9911;
    }
    location / {
        ...
    }
}

如上所示，hsiar启动了一个服务，在8088端口上进行监听。当匹配到 ‘/frame’ 开头的请求时，将其代理转发到 http://127.0.0.1:9911上的服务进行处理。

这样，我们访问http://127.0.0.1:8088/frame 和访问http://127.0.0.1:9911/frame 一样了，从而实现了化 “不同源” 为 “同源”。

明确允许其他源访问当前源的对象

前面提到，在没有明确授权的情况下不能访问其他源的对象。所以，只需要对需要访问当前源的其他源进行授权，就可以使对方名正言顺的访问当前源的对象。hsiar 可以通过配置的方式，进行这种授权。

配置文件：/home/hsiar/hsiar-green.el7/conf/cross-domain-map.conf

1
2
3
4
5
6
map $http_origin $corsHost {
	default $host;
    "~http://localhost:8080" http://localhost:8080;
    "~http://localhost:8092" http://localhost:8092;
    "~http://192.168.125.53:8080" http://192.168.125.53:8080;
}

只需参照如上配置进行设置，即可。