同源策略

  • 浏览器的同源策略：是一种约定，是浏览器最核心也是最基本的安全功能，如果浏览器少了同源策略，则浏览器的正常功能可能都会受到影响。

  • 同源: 协议、域名(IP)、端口相同即为同源

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # 不同源  协议不同
    http://192.168.200.131/user/1
    https://192.168.200.131/user/1

    # 不同源 IP不同
    http://192.168.200.131/user/1
    http://192.168.200.132/user/1

    # 不同源 端口不同
    http://192.168.200.131/user/1
    http://192.168.200.131:8080/user/1

    # 不同源 域名不同
    http://www.nginx.com/user/1
    http://www.nginx.org/user/1

    # 满足同源
    http://www.nginx.org:80/user/1
    http://www.nginx.org/user/1

跨域问题

  • 有两台服务器分别为A,B,如果从服务器A的页面发送异步请求到服务器B获取数据，如果服务器A和服务器B不满足同源策略，则就会出现跨域问题。

  • 演示效果：nginx的html目录下新建一个a.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <html>
      <head>
            <meta charset="utf-8">
            <title>跨域问题演示</title>
            <script src="jquery.js"></script>
            <script>
                $(function(){
                    $("#btn").click(function(){
                            $.get('http://192.168.200.133:8080/getUser',function(data){
                                    alert(JSON.stringify(data));
                            });
                    });
                });
            </script>
      </head>
      <body>
            <input type="button" value="获取数据" id="btn"/>
      </body>
    </html>

    在nginx.conf配置如下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    server{
            listen  8080;
            server_name localhost;
            location /getUser{
                    default_type application/json;
                    return 200 '{"id":1,"name":"TOM","age":18}';
            }
    }
    server{
    	listen 	80;
    	server_name localhost;
    	location /{
    		root html;
    		index index.html;
    	}
    }

    通过浏览器访问测试

解决方案

  • 使用add_header指令，该指令可以用来添加一些头信息

    1
    2
    3
    语法	add_header name value...
    默认值	—
    位置	http、server、location

  • 此处用来解决跨域问题，需要添加两个头信息，一个是Access-Control-Allow-Origin,Access-Control-Allow-Methods

    • Access-Control-Allow-Origin: 直译过来是允许跨域访问的源地址信息，可以配置多个(多个用逗号分隔)，也可以使用*代表所有源
    • Access-Control-Allow-Methods:直译过来是允许跨域访问的请求方式，值可以为 GET POST PUT DELETE…,可以全部设置，也可以根据需要设置，多个用逗号分隔

  • 具体配置方式

    1
    2
    3
    4
    5
    6
    7
    location /getUser{
        add_header Access-Control-Allow-Origin *;
        # add_header	Access-Control-Allow-Origin	http://www.fl.com
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
        default_type application/json;
        return 200 '{"id":1,"name":"TOM","age":18}';
    }