发布：2022/8/12 22:50:33作者：管理员 来源：本站 浏览次数：1211
什么是同源策略
所有支持JavaScript的浏览器在运行时都会拥有同源策略，这是一种安全方案，简单来说就是，将请求和返回的路由+协议+端口号绑定成一个源，在数据访问的时候，不允许出现跨源（跨域）访问的情况。<script>、<img>、<iframe>、<link>这些包含 src 属性的标签可以加载跨域资源。但浏览器限制了JavaScript的读写权限。跨域是指从一个域的网页去请求另一个域的资源。比如前端服务器10.10.10.1去请求后端服务器10.10.10.2的数据，就会被同源策略拦截，报错。
一种解决方案
利用Nginx的代理转发功能，浏览器发来的请求中，关于请求后端数据的全部重新封装转发给后端服务器，这一切对于浏览器来说都是屏蔽了的，对于浏览器来说，它仅仅和我们的Nginx通信，直接避过了跨域问题。简单来说，妹子QQ上问我C++怎么写，我一边回答她的问题，但是关于指针的问题我不会，我就偷偷在另一边用微信请教大佬，再复制粘贴给妹子，我问大佬这个操作被屏蔽了，妹子以为是我牛逼，这就是我们的思路。
具体设计想法，前后端分离，所有数据请求都加上路由前缀“/api/**”，Nginx遇到这个标识的路由就会转发给后端服务器，由我们的Tomcat接受代理请求。
配置Nginx
## 原始文件是有很多注释的，我这里都删掉了，且截取了其中的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端口
Windows环境下的配置文件为C:\nginx\conf\nginx.conf，具体目录看个人设置。
