跨域&nginx本地项目代理

什么是跨域

跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制

什么是同源策略？

「protocol（协议）、domain（域名）、port（端口）三者一致。」

「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

如何解决跨域？

CORS

跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

在 cors 中会有简单请求和复杂请求的概念

使用 IE<=9, Opera<12, or Firefox<3.5 或者更加老的浏览器，这个时候请使用 JSONP

参考文章

JSONP

JSONP 主要就是利用了script标签没有跨域限制的这个特性来完成的。
仅支持 GET 方法

<script type="text/javascript">  
window.jsonpCallback = function(res) {
        console.log(res);  
    };
</script>
<script  src="http://localhost:8080/api/jsonp?msg=hello&cb=jsonpCallback"  type="text/javascript"></script>

Nginx 反向代理

配置如下个菜单

Websocket

WebSocket 规范定义了一种 API，可在网络浏览器和服务器之间建立“套接字”连接,这种方式本质没有使用了 HTTP 的响应头, 因此也没有跨域的限制

window.postMessage

postMessage提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

otherWindow.postMessage(message, targetOrigin, [transfer]); 详细用法

document.domain + Iframe

该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。只需要给页面添加document.domain ='test.com'表示二级域名都相同就可以实现跨域。

window.location.hash + Iframe

通过 url 带 hash ，通过一个非跨域的中间页面来传递数据。

window.name + Iframe

iframe 的 src 属性由外域转向本地域，跨域数据即由 iframe 的 window.name 从外域传递到本地域

参考文章

本地项目通过nginx代理

本地启动nginx并修改host文件

host文件修改指向

比如我这里新增设置了一个127.0.0.1 liyulaikkk.kaikeba.com的域名：
伪造本地的hosts文件，实现对域名的解析 solar host文件解释

nginx解决端口问题

server_name访问的地址与host一致，proxy_pass本地项目启动地址+端口

http {
//     省略配置
    server {
        listen 80;
        server_name liyulaimos.kaikeba.com;
        location / {
        proxy_pass http://127.0.0.1:3006;
        }
    }
    server {
        listen 80;
        server_name liyulaikkk.kaikeba.com;
        location / {
        proxy_pass http://127.0.0.1:3000;
        }
    }
}

流程解析

浏览器准备发起请求，访问http://mamage.leyou.com，但需要进行域名解析
优先进行本地域名解析，因为我们修改了hosts，所以解析成功，得到地址：127.0.0.1（本机）
请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80 ，本机的nginx一直监听80端口，因此捕获这个请求
nginx中配置了反向代理规则，将manage.leyou.com代理到http://127.0.0.1:9001
主机上的后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginx
主机上的后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginx
流程图