毫无章法的记录--跨域相关小知识

浏览器的同源策略：

存储在浏览器中的数据，如localStroage、Cookie和IndexedDB不能通过脚本跨域访问

不能通过脚本操作不同域下的DOM

不能通过ajax请求不同域的数据

同源：

协议/域名/端口都一致视为同源；

eg:
http://www.abc.com/index.html 调用 http://www.abc.com/server.php （非跨域）

http://www.abc.com/index.html 调用 http://www.def.com/server.php （主域名不同:abc/def，跨域）

http://qwe.abc.com/index.html 调用 http://asd.abc.com/server.php （子域名不同:qwe/asd，跨域）

http://www.abc.com:8080/index.html 调用 http://www.abc.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.abc.com/index.html 调用 https://www.abc.com/server.php （协议不同:http/https，跨域）

 

小总结： 两个路径中只要有协议，域名，端口任何一方出现不同，就可以视为非同源，相互调用属跨域访问；
PS:localhost和127.0.0.1虽然都指向本机，但也属于跨域。

WEB项目中常见的跨域：

前后端分离，代码分别部署在同一服务器，不同端口，或者不同的服务器上，前端通过Ajax请求服务器，非同源，不能请求；

解决跨域问题：

常用：利用nginx反向代理,解决跨域问题；

只需简单配置nginx即可：

server {
        listen       80;
        server_name  www.abc.com;
        access_log  logs/test.access.log;
        # 匹配以/apis/开头的请求，此类请求会被代理转发到你proxy中的地址中。
        # 可改变协议，域名，端口中的任意一种
        location ^~ /apis/ {
            proxy_pass http://www.def.com/; 
        }
        location / {
            root html/a;
            index index.html index.htm;
        }
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

看起来活灵活现的举例：

何谓跨域，以军营为例，你属于一营士兵，营地规定（浏览器同源策略）不能到别的营地拿东西，看东西，听东西......等等
但实际生活中，需要一营士兵到别的营地中工作生活很正常，为了不影响规定的存在，在一营的某个房间（nginx >>> proxy），
配置了一台时光机，他可以带你到想去的地方，假设它在一号营房，那么只要想到别的营地中，你只要先去一号营房即可，
时光机会带到你目的地，而对于一营的卫兵来说，你并没有走出营地，不管你在一号营房带出来什么/干了什么，都视为是一营的。

更小的总结：

跨域问题的产生是浏览器造成的！

至于浏览器为何要这样做，百度一下，便知始终。