服务搭建-Nginx绕过同源策略

什么是同源策略

所有支持JavaScript的浏览器在运行时都会拥有同源策略，这是一种安全方案，简单来说就是，将请求和返回的路由+协议+端口号绑定成一个源，在数据访问的时候，不允许出现跨源（跨域）访问的情况。<script>、<img>、<iframe>、<link>这些包含 src 属性的标签可以加载跨域资源。但浏览器限制了JavaScript的读写权限。跨域是指从一个域的网页去请求另一个域的资源。比如前端服务器10.10.10.1去请求后端服务器10.10.10.2的数据，就会被同源策略拦截，报错。

一种解决方案

利用Nginx的代理转发功能，浏览器发来的请求中，关于请求后端数据的全部重新封装转发给后端服务器，这一切对于浏览器来说都是屏蔽了的，对于浏览器来说，它仅仅和我们的Nginx通信，直接避过了跨域问题。简单来说，妹子QQ上问我C++怎么写，我一边回答她的问题，但是关于指针的问题我不会，我就偷偷在另一边用微信请教大佬，再复制粘贴给妹子，我问大佬这个操作被屏蔽了，妹子以为是我牛逼，这就是我们的思路。
具体设计想法，前后端分离，所有数据请求都加上路由前缀“/api/**”，Nginx遇到这个标识的路由就会转发给后端服务器，由我们的Tomcat接受代理请求。

Nginx.png

配置Nginx

Windows环境下的配置文件为C:\nginx\conf\nginx.conf，具体目录看个人设置。

## 原始文件是有很多注释的，我这里都删掉了，且截取了其中的http片段出来，主要看http->server->location配置项
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        # 反向代理，突破同源策略
        location ^~ /api {
            proxy_pass http://localhost:8080;
            # proxy_pass http://47.xxx.xxx.239:8080;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
## 这里仅仅是Windows的配置，Linux和Mac下的部分设置有所不同，具体看文档
## 安全起见，Tomcat里的SpringMVC最好配置一下/api/**的拦截器

题外话

对于前端开发人员，刷新页面是很痛苦的，尤其是调试大规模的样式，可能会刷新数十次甚至百次浏览器，这时node的browser-sync工具就有用了，只要一行命令即可，它启动sync代理80端口的Nginx，当你修改页面文件时，前端浏览器会主动刷新页面，就不需要窗口切来切去手动Ctrl+R了。

:: filename->run_sync.bat
browser-sync start --proxy "localhost:80" --files "**"

启动过程：

C:\nginx>nginx.exe              # 启动Nginx，监听80端口
C:\nginx>cd html                #切换目录
C:\nginx\html>run_sync.bat      #运行sync，默认3000端口

具体的文件分布：

我的Nginx目录