文档章节

用Nginx和Apache的反向代理解决Ajax的跨域问题

HI曲奇饼干
 HI曲奇饼干
发布于 2016/06/10 12:48
字数 937
阅读 341
收藏 18

概述

         Ajax开发中令人头疼的问题之一是跨域问题。在服务器端来说,我们常用的手段之一就是利用Nginx或者Apache的反向代理功能。

         傲游主站上有一个很吸引人的功能,就是下载次数计数,如下图所示。这个功能就是利用了上述技术实现的。

 从下图的Firebug中可以看到,该页面通过Ajax反复请求一个名为/api/counter的路径以径获取最新的下载数量。

         而这个输出路径实际上在服务器上是不存在的,这个路径只是另外一台服务器某个路径而已,这就是使用了Nginx的反向代理功能实现的。

反向代理

         反向代理(Reverse Proxy),顾名思义,就是代理的反向功能。我们使用代理,可以访问一些我们所不能直接访问到的网络,或者可以隐藏自己的真实身份。而反向代理,可以在不暴露内部服务器的情况下,让外部用户访问我们内部、防火墙后的服务。

        

    使用反向代理主要有以下好处:

1. 请求的统一控制,包括设置权限、过滤规则等;

2. 隐藏内部服务真实地址,暴露在外的只是反向代理服务器地址;

3. 实现负载均衡,内部可以采用多台服务器来组成服务器集群,外部还是可以采用一个地址访问;

4. 解决Ajax跨域问题。

5. 作为真实服务器的缓冲,解决瞬间负载量大的问题。

Nginx与Apache配置

         1、Nginx

         回到计数器的这个例子,Nginx的配置片段如下所示:

         location /api/counter {

             rewrite (.*) /out break;

               proxy_pass http://hfahe.maxthon.com;

             proxy_set_header Host "hfahe.maxthon.com";

         }

     那么访问http://www.maxthon.cn/api/counter这个地址,输出和直接访问http://hfahe.maxthon.com/out这个地址是完全一样的,如下图所示。通过这种方式,本地的Ajax就能够读取到其他远程服务器的数据了。

     proxy_set_header参数在需要进行域名的转发时使用。Nginx还可以进行端口的转发,只需将proxy_pass配置修改为http://hfahe.maxthon.com:81这种形式即可。

         2、Apache

         Apache反向代理需要使用mod_proxy和mod_proxy_http.so等模块。

         在Windows下的配置如下所示:

         LoadModule proxy_module modules/mod_proxy.so

         LoadModule proxy_http_module modules/mod_proxy_http.so

 

         ProxyRequests Off

         ProxyPass /start http://i.maxthon.cn/

 

         ProxyPass /proxy http://192.168.1.111/proxy/

         ProxyPassReverse /proxy http://192.168.1.111/proxy/ # for server redirect

         ProxyPass和ProxyPassReverse指令都是反向代理需要的配置。ProxyPass用于将一个远程服务器映射到本地服务器的URL空间中。而ProxyPassReverse主要解决后端服务器重定向造成的绕过反向代理的问题,在后端服务器会进行服务器端跳转时使用,对HTTP重定向时回应中的Location、Content-Location和URI头里的URL进行调整。

         而在Linux下的配置如下所示:

         LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so

         LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so

         ProxyRequests Off

         ProxyPass /fb http://fb.maxthon.com/ajax

         ProxyPassReverse /fb http://192.168.1.111/proxy/ # for server redirect

         一个有趣的问题

         在上面的例子中,/start是作为http://i.maxthon.cn的反向代理的,但是在用/start和/start/访问时,结果完全不一样。

         在使用/start进行访问时,页面空白,许多文件无法加载:

         

         在使用/start/访问时,页面正常显示

需要了解分布式技术请联系我

项目核心代码结构截图

分布式框架介绍 - kafkaee - kafkaee的博客

   项目模块依赖

分布式框架介绍 - kafkaee - kafkaee的博客

特别提醒:开发人员在开发的时候可以将自己的业务REST服务化或者Dubbo服务化

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客
 

zookeeper、dubbo服务启动 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客
 

dubbo管控台 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 REST服务平台

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

 

分布式框架介绍 - kafkaee - kafkaee的博客

© 著作权归作者所有

HI曲奇饼干
粉丝 110
博文 38
码字总数 91160
作品 0
深圳
架构师
私信 提问
加载中

评论(1)

HI曲奇饼干
HI曲奇饼干 博主
很经典框架
Nginx 解决浏览器 Ajax 跨域问题

跨域是指 host 为 A 页面中的 Ajax 发起指向 host B 的请求,只要 A 和 B 的协议、域名、端口、子域名其中任何一项不同,则执行的访问都会被认为是跨域的请求,几乎所有的浏览器为了安全等问...

摆码王子
2018/04/16
0
0
九种跨域方式实现原理(完整版)

前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 本文完整的源代码请猛戳github博客 一、什么是跨域? 1.什么是同源策略及其限制内容? ...

浪里行舟
01/25
0
0
前端必须懂的计算机网络知识—(跨域、代理、本地存储)

前端必须懂的计算机网络知识系列文章: DNS服务器和跨域问题 计算机网络的分层模型 IP地址和MAC地址 前端必须懂的计算机网络知识—(跨域、代理、本地存储) 前端必须懂的计算机网络知识—(TC...

梦想攻城狮
2018/10/08
0
0
前后端分离--拿起node反向代理的武器(全记录)

做个勇往直前的人,做个勇往直前的前端 文/ziven 标题图/来自网络 前后端分离是个很重要的概念,尤其是今天的大前端时代。jsp,html嵌套在java web项目中似乎显得比较古老而厚重。当我们处在...

ziven先生
2017/06/28
0
0
Nginx 缓存引发的跨域惨案

原文出处:网易乐得 - 张捷 1. 前言 贵金属wap版直播间上线后,偶尔有用户反馈,在进入wap直播间的时候,出现空白页面,但是重新刷新又可以正常显示了。我们曾一度认为是网络请求异常或兼容问...

网易乐得 - 张捷
2017/08/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
6
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
14
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
2.9K
24
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
46
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部