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

资料来源：网络整理时间：2023/2/14 1:08:48 共计：3620 浏览

什么是同源策略

所有支持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，具体目录看个人设置。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：跨域问题产生的原因以及十种解决方案 | ·下一条：如何真正理解用Nginx代理来解决同源策略