这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【跨域解决方案之nginx 】
大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员
今天给大家分享一下,修真院官网js任务5,深度思考中的知识点——跨域解决方案之nginx
1.背景介绍
什么是跨域以及产生原因
跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。
什么是同源策略?
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制以下几种行为:
1. Cookie、LocalStorage 和 IndexDB 无法读取
2. DOM 和 Js对象无法获得
3. AJAX 请求不能发送
常见跨域场景
2.知识剖析
跨域解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
3.常见问题
如何跨域
4.解决方案
nginx反向代理解决跨域
5、编码实战
首先找到nginx.conf
自定义本地的url请求规则 ,如 http://www.720ui.com/blog 则对应要nginx服务转发到 http://blog.720ui.com 。
server
{
listen 80;
server_name www.720ui.com;
location ^~ /blog/ {
proxy_pass http://blog.720ui.com/;
}
}
6.拓展思考
还有什么解决方案
jsonp,利用了src属性可以跨域的特性
7.参考文献
参考一:跨域问题解决方案(Nginx)
密码: 9epr
感谢大家观看
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~
我的邀请码:12361358,或者你可以直接点击此链接:http://www.jnshu.com/login/1/12361358
更多内容,可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院:https://www.jnshu.com,初学者转行到互联网的聚集地