MyException - 我的异常网
当前位置:我的异常网» Web前端 » 用nginx的反向代理机制解决前端跨域有关问题

用nginx的反向代理机制解决前端跨域有关问题

www.MyException.Cn  网友分享于:2013-12-30  浏览:0次
用nginx的反向代理机制解决前端跨域问题

https://www.cnblogs.com/gabrielchen/p/5066120.html

 

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.wwaattssuunn.com/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://www.wwaattssuunn.com/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反向代理解决跨域

  上面已经说到,禁止跨域问题其实是浏览器的一种安全行为,而现在的大多数解决方案都是用标签可以跨域访问的这个漏洞或者是技巧去完成,但都少不了目标服务器做相应的改变,而我最近遇到了一个需求是,目标服务器不能给予我一个header,更不可以改变代码返回个script,所以前5种方案都被我否决掉。最后因为我的网站是我自己的主机,所以我决定搭建一个nginx并把相应代码部署在它的下面,由页面请求本域名的一个地址,转由nginx代理处理后返回结果给页面,而且这一切都是同步的。

 

  关于nginx的一些基本配置和安装请看我的另一篇博客,下面直接讲解如何配置一个反向代理。

 

  首先找到nginx.conf或者nginx.conf.default 或者是default里面的这部份   

          

   其中server代表启动的一个服务,location 是一个定位规则。

location /{   #所有以/开头的地址,实际上是所有请求

root  html     #去请求../html文件夹里的文件,其中..的路径在nginx里面有定义,安装的时候会有默认路径,详见另一篇博客

index  index.html index.htm  #首页响应地址

}

  

  从上面可以看出location是nginx用来路由的入口,所以我们接下来要在location里面完成我们的反向代理。

  假如我们我们是www.a.com/html/msg.html 想请求www.b.com/api/?method=1&para=2;

  我们的ajax:

var url = 'http://www.b.com/api/msg?method=1&para=2';

$.ajax({ type: "GET", url:url, success: function(res){..}, .... })

  

  上面的请求必然会遇到跨域问题,这时我们需要修改一下我们的请求url,让请求发在nginx的一个url下。

var url = 'http://www.b.com/api/msg?method=1&para=2'; 
var proxyurl = 'msg?method=1&para=2';
//假如实际地址是 www.c.com/proxy/html/api/msg?method=1&para=2; www.c.com是nginx主机地址
 $.ajax({ 
type: "GET", 
url:proxyurl, 
success: function(res){..}, 
.... 
})  

  

  

  再在刚才的路径中匹配到这个请求,我们在location下面再添加一个location。

location ^~/proxy/html/{
rewrite ^/proxy/html/(.*)$ /$1 break;
proxy_pass http://www.b.com/;
}

以下做一个解释

1.'^~ /proxy/html/ '

  就像上面说的一样是一个匹配规则,用于拦截请求,匹配任何以 /proxy/html/开头的地址,匹配符合以后,停止往下搜索正则。

2.rewrite ^/proxy/html/(.*)$ /$1 break;

  代表重写拦截进来的请求,并且只能对域名后边的除去传递的参数外的字符串起作用,例如www.c.com/proxy/html/api/msg?method=1&para=2重写。只对/proxy/html/api/msg重写。

  rewrite后面的参数是一个简单的正则 ^/proxy/html/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。

  break代表匹配一个之后停止匹配。

3.proxy_pass

  既是把请求代理到其他主机,其中 http://www.b.com/ 写法和 http://www.b.com写法的区别如下:

不带/

 location /html/
{
  proxy_pass http://b.com:8300;  
}

带/

location /html/  
{  
    proxy_pass http://www.wwaattssuunn.com/b.com:8300/;  
} 

上面两种配置,区别只在于proxy_pass转发的路径后是否带 “/”。

  针对情况1,如果访问url = http://server/html/test.jsp,则被nginx代理后,请求路径会便问http://proxy_pass/html/test.jsp,将test/ 作为根路径,请求test/路径下的资源。

  针对情况2,如果访问url = http://server/html/test.jsp,则被nginx代理后,请求路径会变为 http://proxy_pass/test.jsp,直接访问server的根资源。

 

修改配置后重启nginx代理就成功了。

 

 

 

参考:http://seanlook.com/2015/05/17/nginx-location-rewrite/

         http://www.jbxue.com/article/2187.html

 

server { 
listen       80; 
server_name  A.ABC.com; 
location / { 
proxy_pass http://localhost:1234; 
proxy_set_header   Host    $host; 
proxy_set_header   X-Real-IP   $remote_addr; 
proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for; 
    } 
} 

另外一个:

server { 
listen       80; 
server_name  B.ABC.com; 
location / { 
proxy_pass http://localhost:4321; 
proxy_set_header   Host    $host; 
proxy_set_header   X-Real-IP   $remote_addr; 
proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for; 
    } 
} 

文章评论

程序员和编码员之间的区别
程序员和编码员之间的区别
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
如何成为一名黑客
如何成为一名黑客
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
为什么程序员都是夜猫子
为什么程序员都是夜猫子
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
 程序员的样子
程序员的样子
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员的鄙视链
程序员的鄙视链
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
漫画:程序员的工作
漫画:程序员的工作
鲜为人知的编程真相
鲜为人知的编程真相
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
编程语言是女人
编程语言是女人
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
一个程序员的时间管理
一个程序员的时间管理
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
老程序员的下场
老程序员的下场
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
旅行,写作,编程
旅行,写作,编程
中美印日四国程序员比较
中美印日四国程序员比较
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
我的丈夫是个程序员
我的丈夫是个程序员
代码女神横空出世
代码女神横空出世
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
10个调试和排错的小建议
10个调试和排错的小建议
程序员都该阅读的书
程序员都该阅读的书
那些争议最大的编程观点
那些争议最大的编程观点
程序员必看的十大电影
程序员必看的十大电影
程序员应该关注的一些事儿
程序员应该关注的一些事儿
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
每天工作4小时的程序员
每天工作4小时的程序员
Java程序员必看电影
Java程序员必看电影
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
总结2014中国互联网十大段子
总结2014中国互联网十大段子
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有