运维角度处理跨域问题

一、同源政策

同源政策指三个相同，协议相同、域名相同、端口相同；三者相同为同一个域，任何一个不同为非同一个域。

二、跨域

跨域指两个不同的域之间的资源交互。

如：

http://www.leebook.com/index.html 调用 http://www.leebook.com/data.html       不跨域(协议、域名、端口都一致)
http://www.leebook.com/index.html 调用 https://www.leebook.com/index.html     跨域(协议不一样)
http://www.leebook.com/index.html 调用 http://www.book.com/index.html         跨域(域名不一样)
http://www.leebook.com/index.html 调用 http://www.leebook.com:8080/index.html 跨域(端口不一样)

三、两个常用场景

1、场景一

http://193.112.171.122:8090/login/index.html 调用 http://193.112.171.122:8080/opreation/data.html  端口不一样，存在跨域

中间弄一层代理，通过这种代理的方式，已经不存在跨域了：

http://193.112.171.122:8090/login/index.html 

调用 

http://193.112.171.122:8090/opreation/data.html

代理

http://172.16.0.16:8080/operation

2、场景二

如果是在本地打开一个网页，如：E:dataindex.html 调用 http://193.112.171.122:8080/opreation/data.html 存在跨域问题；此种在交互的服务端nginx配置加上：add_header 'Access-Control-Allow-Origin' '*'; 表示接受任何域名的访问；此时还需要看浏览器支不支持跨域访问，google浏览器是不支持的，可使用火狐试试，或者将本地的index.html放到如场景一一样的服务器上。

四、实例

这里以场景为实例，E:dataindex.html，使用浏览器打开这个网页，这个网页中包含访问其他服务端的域名或访问地址

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    </head>
    <body>
        <button class="btn">获取数据</button>
        <script type="text/javascript">
        $(function() {
            $(".btn").click(function() {
                $.ajax({
                    type: "get",
                    url: "http://193.112.171.122:8080/opreation/data.html",
                    dataType:"json",
                    success: function(data) {
                        console.log("获取成功");
                    },
                    error: function() {
                        console.log("获取失败");
                    }
                });
            })
        })
        </script>
    </body>
</html>

1、直接现象

浏览器会报错；服务端返回的值再浏览器中不会显示

2、处理问题的两个方法

方法一：

在nginx端加配置 add_header 'Access-Control-Allow-Origin' '*'；此方法还存在浏览器是否允许跨域的问题，比如google浏览器即使nginx服务端加了跨域的配置，也不生效；可以使用其他的浏览器如火狐，或者安装google浏览器的相关插件允许跨域

location /opreation {
         alias /leebook;
         add_header 'Access-Control-Allow-Origin' '*';
         default_type application/json;
         return 200 '{"status":"success","result":"This is the nginx response"}';
    }

方法二：

把放在E: estindex.html的这个html放在与此html页面指向的web服务器上相同的端口下；这样子就是访问http://193.112.171.122:8080/login/index.html；此index页面里包含http://193.112.171.122:8080/opreation/data.html ；这样相同的IP、相同的端口、相同的协议这样就不存在跨域的问题。

location /login {
         alias /login;
}
location /opreation {
         alias /leebook;
         add_header 'Access-Control-Allow-Origin' '*';
         default_type application/json;
         return 200 '{"status":"success","result":"This is the nginx response"}';
}

五、写在最后

在平凡中坚持前行，总有一天会遇见不一样的自己。

写博客记录、思考、总结，趟过的坑不趟第二遍。