背景和应用场景:
当前团队运营多个网站,比如有两个网站www.t1.com、www.t2.com。技术团队同时掌控了t1、t2的资源,理论上t2可以使用t1页面级的资源,这样有利于业务解耦和集中维护。但页面级的资源存在跨域安全问题,关于跨域问题可见前文http://truemylife.iteye.com/admin/blogs/1454300。这里由于t1与t2并非主次域名,因此若按前文,将无法实现跨域调用。这种情况下,要实现资源调用,没有条件只能创造条件,好让t1,t2实现同源,也就是实现同域名,这样就绕过了此问题。
Nginx配置:
配置www.t1.com片段
server {
listen 80;
server_name www.t1.com;
server_name_in_redirect off;
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_buffers 16 8k;
location / {
proxy_pass http://192.168.90.111:8080;
proxy_redirect http://wwwt1.com/ /;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffers 4 32k;
}
}
再新增一个供www.t2.com调用的同源域名t1.t2.com
server {
listen 80;
server_name t1.t2.com;
server_name_in_redirect off;
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_buffers 16 8k;
location / {
proxy_pass http://192.168.90.111:8080;
proxy_redirect http://t1.t2.com/ /;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffers 4 32k;
}
if ($request_uri !~* "/(s|billstudy)/(.*)") {
rewrite ^(.*)$ http://www.t1.com break;
}
}
这样,www.t1.com与t1.t2.com实际上指向相同的应用,t1.t2.com存在的意义就是供www.t2.com调用页面资源,因为www.t2.com与t1.t2.com是主次域名关系,主次域名跨域方案就简单了,参考前文。
对于t1.t2.com这个访问域名,我们并不想对外公开,因此做了访问的限制,看t1.t2.com的配置里这句:
if ($request_uri !~* "/(s|billstudy)/(.*)") {
rewrite ^(.*)$ http://www.t1.com break;
}
除了公开/s/与/billstudy/这个访问路径外对www.t2.com公开外,其他通过t1.t2.com访问,都会被重定向www.t1.com。这样有利于资源权限的控制。还可以加上防盗链的配置。
Nginx有大量的正则表达式应用,参考http://www.howtocn.org/nginx:pcre
Nginx rewrite样例 http://blog.csdn.net/cnbird2008/article/details/4409620
另外在修改nginx.conf时,一定要注意空格,比如if($request_uri !~* "/(s|billstudy)/(.*)")是不符合书写格式的,就无法启动nginx,if后面一定要留空格。
javascript支持跨域
通过iframe实现跨域调用资源时,需要主次页面都置
<script>document.domain="t1.com";</script>
但如果想资源被多个域名调用,此时定死指定t1.com就出错了,需要动态扩展,
<script> if(location.href.indexOf("t2.com")>0){ document.domain="t2.com"; }else{ document.domain="t1.com"; } </script>
这样资源就能同时被t1.com、t2.com调用了,当然访问资源的时候需要使用不同的域名,比如t1.com要调用t1.com的资源,使用http://www.t1.com/xxx.html; t2.com要调用xxx.html时,必须使用http://t1.t2.com/xxx.html。按以上配置和代码扩展,可以进一步扩展出更多的不同域名之间的页面级资源调用。