跨域解决方案之nginx

最新推荐文章于 2025-06-21 11:32:12 发布

原创最新推荐文章于 2025-06-21 11:32:12 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

分享人：陈xx

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

一.背景介绍

什么是跨域？

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，
b页面为域名地址，所进行的访问行动都是跨域

二.知识剖析

产生的原因？

浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源

同ip（或domain）,同端口，同协议视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写
本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略

现代浏览器在安全性和可用性之间选择了一个平衡点。
在遵循同源策略的基础上，选择性地为同源策略“开放了后门”。例如img script style等标签，都允许垮域引用资源,然而，
你也只能是引用这些资源而已，并不能读取这些资源的内容

常见跨域场景

http://www.domain.com/a.js
http://www.domain.com/b.js 同一域名，不同文件或路径允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js 同一域名，不同端口不允许

http://www.domain.com/a.js
https://www.domain.com/b.js 同一域名，不同协议不允许

http://www.domain.com/a.js
http://192.168.4.12/b.js 域名和域名对应相同ip 不允许

http://www.domain.com/a.js
http://x.domain.com/b.js 主域相同，子域不同不允许
http://domain.com/c.js

http://www.domain1.com/a.js
http://www.domain2.com/b.js 不同域名不允许

三.常见问题

1. 跨域解决方案有哪些？

2. 同源策略限制了什么？

3. nginx解决跨域的原理是什么？

四.解决方案

1. 跨域解决方案有哪些？

回答：

1、通过jsonp跨域

               2、 document.domain + iframe跨域

               3、 location.hash + iframe

               4、 window.name +iframe跨域

               5、 postMessage跨域

               6、跨域资源共享（CORS）

               7、 nginx代理跨域

               8、 nodejs中间件代理跨域

               9、WebSocket协议跨域

nginx反向代理解决跨域

2. 同源策略限制了什么？

回答：

同源策略限制以下几种行为：

1.Cookie、LocalStorage 和 IndexDB 无法读取

2.DOM 和 Js对象无法获得

3.AJAX 请求不能发送

3. nginx解决跨域的原理是什么？
正向代理：代理位于网站和客户端中间，
客户端无法访问某网站，就将请求发送给代理服务器，代理从网站取回来再发送给客户端，网站并不知道为谁提供服务

反向代理：客户端访问某网站的一个页面，
但是网站并没有，就偷偷从另外一台服务器上取回来,然后作为自己的内容吐给用户，用户不知道真正提供服务的是谁

对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过
检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确
处理请求，并且并不知道这个请求是来自代理服务器的。

简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实
的服务器，让它以为这个http请求是直接来自与用户浏览器的。

七.参考文献

参考一：
http://aurthurxlc.github.io/Aurthur-2016/cross-origin-resource-sharing.html
跨域问题解决方案（Nginx）