浏览器跨域(同源策略)

跨域

浏览器的同源策略 : 同源是指协议，域名，端口完全相同。这个同源也就是跨域中的同域

跨域：不是同源中的数据可以访问

1.jsonp跨域

原理：由于同源策略的限制，浏览器无法跨域访问数据，但是 script img iframe link 标签没有这个限制，所以说当我们要访问远程的数据的时候，就动态生成一个script标签 , src指向远程的数据。jsonp只能进行get请求

在当前页面有一个script标签

<script type="javascript">
    function CrossOrigin(data){
        console.log(data);   
    }
</script>

再动态生成一个 script标签,src指向远程

<script type="javascript" src="www.远程.com">

</script>

在远端(www.远程.com)代码中调用CrossOrigin( ) 方法，并传入数据

    
    CrossOrigin ( "这是要传输的数据" )；
    

这样就相当于CrossOrigin ( "这是要传输的数据" )； 被引入到当前界面，传入参数，并调用方法CrossOrigin（），这样远程的数据就显示在了当前界面 相当于：

<script type="javascript">
    function CrossOrigin(data){
        console.log(data);   
    }
   
     CrossOrigin ( "这是要传输的数据" )；
</script>

2.cors跨域

在app.js中加入这些代码，在应答头中加入信息，让浏览器支持跨域

3.代理跨域

例如: 浏览器访问 a.com,在a.com的页面中要调用b.com的接口 b.com/login 在a的服务器中设置代理，让http://a.com/apis/login 指向 b.com (b.com/login)

那么对于服务器来说：当前页面是http://a.com 又是调用的 a.com/apis接口，那么就没…

---

在Windows上模拟代理跨域

Windows域名重定向配置

更改c:windows/system32/etc/host文件

etc可能显示不出来，用搜索功能

增加一行，127.0.0.0 a.com 如果电脑要访问a.com 那就重定向到127.0.0.0

有的编辑器没有权限更改，notepad++可以

Nginx代理的配置

更改Nginx主目录中conf中nginx.conf文件 加入

server {
        listen       80; 
        
        // server_name 这是设置当访问的域名为a.com的时候的处理  原文中  #  为注释符
        server_name  a.com;  
		charset utf-8;
		access_log  logs/a.access.log  main;
        location / {
            root   html;
            index  index.html index.htm;
        }
		
         // 当访问为a.com/apis的时候，进行代理去访问真正的服务器 localhost:3000
		location /apis { #添加访问目录为/apis的代理配置
			rewrite  ^/apis/(.*)$ /$1 break;
			proxy_pass   http://localhost:3000;
        }
		
        error_page  404              /404.html;
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }