跨域问题以及解决办法

April 9, 2018
跨域

字数:

本文主要讨论以下几个问题:
- 跨域现象的简单描述
- 跨域问题的解决办法(非全面) - 跨域解决办法在实际中的应用

跨域现象的简单描述

跨域是浏览器的同源策略引发的一个问题,主要是为了安全角度考虑,防止跨站攻击。现象非常地简单,现在做两个网站,一个是t2.tao.de,见,另一个是t1.tao.de,这第二个站点可以做得非常地简单,一个静态表单就可以了:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
      $(document).ready(function(){
        $("#submit").click(function(){
          alert($("input[name='user']").val());
          $.post("http://t2.tao.de/add_user" );
        });
      });
    </script>
    </head>
<body>
  <input type="text" value="asdasd" name="user"/><input id="submit" type="submit" value="submit"/>
</body>
</html>

显然,在t1站点上提交一个ajax的POST请求到t2,看是否能成功,结果显示如下:

Failed to load http://t2.tao.de/add_user: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://t1.tao.de' is therefore not allowed access.

结果表明,t1是被禁止掉了。解决办法有好几种,比如JSONP以及CORS,下文仅介绍在服务器反反代理的解决办法。

跨域问题的解决办法

同源策略提到了,访问不同的域名或端口,即跨域了,那么其中的一个解决办法就是让访问的域名相同即可,比如上文,t1的页面要访问t2的接口,那么能不能把t1的页面变成t2的?

通过Nginx的反代理配置是很容易做到的:

server {
        listen 80;
        server_name t2.tao.de;
        location ~ .*\.(gif|jpg|jpeg|png|html)$ {
                #root /var/www/web/t1/;
                proxy_pass http://t1.tao.de;
                index index.html;
        }
        location / {
                proxy_set_header Host t2.tao.de;
                proxy_pass http://localhost:8080;
        }
}

这个nginx的配置即将静态页反代理到站点1,因此访问http://t2.tao.de/index.html,其内容来自于t1。

实际应用

以上做法是非常的简单,实际运用起来作用颇大,以下是一个运用场景,搭建前后端分离开发的Developement环境的示意图:
前后分离开发环境配置


loading