nginx入门级详解及跨域问题的解决
代理和反向代理的概念?
不知道有多少人跟我一样,对代理和反向代理蒙蔽的,今天就来给大家普及一下。
在很久以前小明去吃饭,往往就是走进一家饭店然后打开菜单,点着他最爱的红烧肉,然后等着老板上菜,吃完交钱溜了溜了。这个时候小明和饭店是一对一的关系。客户和服务商之间完全透明化,小明知道这家餐馆的名字,餐馆也知道小明的名字。
后来有了第三方订餐外卖平台(代理),小明懒得动身前往饭店,小明打个电话或用APP,先选好某个饭店,再点好菜,外卖小哥会送上门来。
由于某个品牌的饭店口碑特别好,食客络绎不绝涌入,第三方订餐电话也不绝于耳,但是限于饭店接待能力有限,无法提供及时服务,很多食客等得不耐烦了,纷纷铩羽而归,饭店老总看着煮熟的鸭子飞走了,心疼不已。
痛定思痛,老总又成立了几个连锁饭店,形成一个集群,对外提供统一标准的菜品服务,电话订餐电话当食客涌入饭店总台,总台将食客用大巴运到各个连锁店,这样食客既不需要排队,各连锁店都能高速运转起来,一举两得,老总乐开了花,并为此种运作模式起名为“反向代理”(Reverse Proxy)。
反向代理
在计算机世界里,由于单个服务器的处理客户端(用户)请求能力有一个极限,当用户的接入请求蜂拥而入时,会造成服务器忙不过来的局面,可以使用多个服务器来共同分担成千上万的用户请求,这些服务器提供相同的服务,对于用户来说,根本感觉不到任何差别
反向代理的实现
1)需要有一个负载均衡设备来分发用户请求,将用户请求分发到空闲的服务器上
2)服务器返回自己的服务到负载均衡设备
3)负载均衡将服务器的服务返回用户
以上的潜台词是:用户和负载均衡设备直接通信,也意味着用户做服务器域名解析时,解析得到的IP其实是负载均衡的IP,而不是服务器的IP,这样有一个好处是,当新加入/移走服务器时,仅仅需要修改负载均衡的服务器列表,而不会影响现有的服务。
谈完反向代理服务,再来谈谈终端用户常用的代理服务。
代理
1)用户希望代理服务器帮助自己,和要访问服务器通信,为了实现此目标,需要以下工作:
a) 用户IP报文的目的IP = 代理服务器IP
b) 用户报文端口号 = 代理服务器监听端口号
c) HTTP 消息里的URL要提供服务器的链接
2)代理服务器可以根据c)里的链接与服务器直接通信
3)服务器返回网页
4)代理服务器打包3)中的网页,返回用户。
代理服务器应用场景
场景一
如果不采用代理,用户的IP、端口号直接暴露在Internet(尽管地址转换NAT),外部主机依然可以根据IP、端口号来开采主机安全漏洞,所以在企业网,一般都是采用代理服务器访问互联网。
那有同学会有疑问,那代理服务器就没有安全漏洞吗?
相比千千万万的用户主机,代理服务器数量有限,修补安全漏洞更方便快捷。
场景二
在一个超大型局域网,德高望重的家长觉得小盆友们“幼稚”、“有时还有点单纯”,外部的世界是洪水猛兽,为了不让小盆友们学坏,决定不让小盆友们访问一些网站,可小盆友们有强烈的逆反心理,侬越是不让我看,我越是想看,于是小盆友们使用了代理服务器,这些代理服务器将禁止访问的网页打包好,然后再转交给小盆友,仅此而已。
当然关键的关键是代理服务器不在禁止名单当中!
nginx基本配置与参数说明
nginx解决跨域问题
1.什么是跨域以及产生原因
跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。
跨域情况如下:
url | 说明 | 是否跨域 |
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 是 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夹 | 否 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同端口 | 是 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议 | 是 |
http://www.a.com/a.js http://70.32.92.74/b.js |
域名和域名对应ip | 是 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同,子域不同 | 是(cookie不可访问) |
http://www.a.com/a.js http://a.com/b.js |
2.跨域的常见解决方法
目前来讲没有不依靠服务器端来跨域请求资源的技术
1.jsonp 需要目标服务器配合一个callback函数。
2.window.name+iframe 需要目标服务器响应window.name。
3.window.location.hash+iframe 同样需要目标服务器作处理。
4.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage,主要侧重于前端通讯。
5.CORS 需要服务器设置header :Access-Control-Allow-Origin。
6.nginx反向代理 这个方法一般很少有人提及,但是他可以不用目标服务器配合,不过需要你搭建一个中转nginx服务器,用于转发请求。
3.nginx解决跨域问题
我先来说说自己遇到的问题。我有一套项目用的是Angularjs+html,angularjs必须挂到服务下面,所以我启动了一个nginx来挂载angularjs服务。然后在我的js里面去访问本地数据库也就是http://localhost:8080的服务报出了跨域问题,
其实Nginx解决跨域问题的思路很简单,既然两个服务的端口号和域名不匹配,那么我把他代理成端口号和域名一样不就没有跨域问题了,这个方法简直就是绝妙了。只需要我们配置多个location就好。一般来说一个请求url过来,nginx会将它解析到某一个location来处理。这个解析的过程实际上根据location的配置基本可以分为字符串匹配和正则表达式匹配这2种。对于location的组织方式,最简单的就是直接将它们保存为一个链表,解析url的时候一个一个遍历即可找到相应location。
所以我们先配置第一个location,他是用来读取我们的html和js的。
location / {root html\angulr;index index.html;}
然后再配置我们的第二个location,第二个location说白了就是配置我们的ajax请求的URL,用来转发到我们的真实请求。
location ^~/manage/ {proxy_pass http://192.168.0.163:8080/manage/;}
来看一下js和匹配规则
$http.post('manage/get_my_data',angular.toJson($scope.queryContent)).success(function (largeLoad) {$scope.users=largeLoad.data.users;});
这里的话,发送一个请求,系统会根据manage这个字段进行匹配,然后找到nginx匹配的请求,转发到我们真实的请求,这样浏览器就认为js和服务器在同一个域名同一个ip里面,就不会出现跨域问题了。当然关于location还有很多匹配规则和正则匹配,这个后面再继续深入理解。
当然在解决跨域问题的时候遇到了一些麻烦,和误解。在这里要多谢大佬的帮忙非常感谢54powerman
nginx入门级详解及跨域问题的解决相关推荐
- 详解浏览器跨域访问的几种办法
摘要: 本文讨论web前端安全问题以及应对措施,浏览器同源策略以及对资源跨域访问的几种解决方案 本文分享自华为云社区<Web安全和浏览器跨域访问>,原文作者:kg-follower . ...
- 【华为云技术分享】详解浏览器跨域的几种方法
1前言 2背景知识介绍 2.1同源政策 2.2为什么要有跨域限制 3浏览器跨域的解决方案 3.1 CORS标准 3.2 CORS跨域判定的总体流程 3.3简单请求 3.4非简单请求 3.5 CORS相 ...
- Cookie详解与跨域问题
Http是无状态的协议,客户端每次对服务端的http请求都是独立的,不受该客户端其它的请求的影响. 为了把Http这个无状态协议变的与上下文有关系,我们引入了会话(Session)的概念,具有相同会话 ...
- js跨域解决方案php,详解js跨域原理以及2种解决方案_javascript技巧
1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本 ...
- Vue学习笔记(三)Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录 一.参考资料 二.运行环境 三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名 四.GitHu ...
- nginx配置详解,nginx跨域问题
文章目录 前言 更改hosts文件 新增velocityerp.top.conf配置文件 nginx配置header参数(解决跨域),接口方配置 nginx反向代理(解决跨域),发送方配置 nginx ...
- 通过 Nginx 代理转发配置实现跨域(API 代理转发)
通过 Nginx 代理转发配置实现跨域(API 代理转发) 阅读 2285 收藏 119 2017-04-08 原文链接:www.thinktxt.com 1元视频体验视频通话10000分钟cloud ...
- 前端必备 Nginx 配置详解
前端开发者必备的nginx知识 nginx在应用程序中的作用 解决跨域 请求过滤 配置gzip 负载均衡 静态资源服务器 nginx是一个高性能的HTTP和反向代理服务器,也是一个通用的TCP/UDP ...
- Nginx配置详解/代理服务的配置说明
Nginx配置详解 序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作 ...
最新文章
- 解决THINKPHP 支付宝接口异步notify 无效可能的问题。
- hdu 1026 bfs+记录路径
- localStorage的过期时间设置的方法?
- android 开机动画尺寸,Android开机Logo动画制作
- 30. 包含min函数的栈
- 8.5 输入输出重定向
- PAT—1082 射击比赛(20)
- 计算机桌面声音图标,win7桌面右下角的小喇叭音量图标不见了怎么办?
- 笔记本电脑已连接WIFI密码查看方法
- nginx的平滑升级
- word里双横线怎么打_如何在word中画线 怎么在word中输入横线[图文]
- Android自定义控件(一) 可滑动的进度条
- AIX日志型文件系统的nbpi
- 华硕笔记本台式机专用系统 GHOSTXPSP3 v2012.12
- 汽车SoC全生命周期功能+网络安全架构设计
- 用开源博客系统OneBlog来搭建自己的个人技术博客网站(java版博客系统)
- PHPExcel的自定义导出及合并单元格
- 服务器2003蓝屏A5修复,重装XP系统时蓝屏代码0X000000A5如何修复?
- 思科网络学院-网络互连-第八章
- 使用CP2102给stm32烧写代码