如何解决web浏览器跨域问题——利用反向代理nginx/apache/nodejs

Apache设置反向代理解决js跨域问题

这是一个很简单的方案,通过启用Apache反向代理解决js跨域问题。

其实有一个更简单的方法,如果你使用Chrome浏览器,你可以装一个叫Allow-Control-Allow-Origin: *的拓展程序,跨域问题就直接解决啦!但是,这个方法有一个问题,前端跨域POST请求的时候,因为CORS(cross origin resource share)规范的存在,浏览器会首先发送一次OPTIONS嗅探,同时header带上origin,判断是否有跨域请求权限,服务器响应access control allow origin的值,供浏览器与origin匹配,如果匹配则正式发送POST请求。也就是说,如果之前开发的api没有考虑OPTIONS方法的话,OPTIONS嗅探就会失败,那么跨域POST请求也会跟着失败!如果你刚好遇上了这种情况,可以使用Apache反向代理的方法完美解决js跨域问题。

为什么要这么做?

在现在的开发过程中大家会遇到这样一个问题:后端代码写好之后,前端需要将后端代码部署到本地才能正常使用api。若直接使用远程服务器上的api(例如测试服务器上的api)就会出现js跨域问题,导致远程服务器上的api无法使用。但是,将后端代码部署到前端的本地会出现以下几个问题:

  • 前端下载后端代码到本地并配置,花时间

  • 后端代码有更新之后,前端也需要更新本地的后端代码,花时间

  • 前端本地安装的服务器环境可能略有差异,从而导致后端代码在本机上不能正常运行,需要后端协助调试,花时间

为了简单高效的开发,建议前端启用Apache反向代理解决js跨域问题。在解决js跨域问题之后,前端可直接使用测试服务器上的api接口,不需要再在本地部署后端代码。这样前端和后端都只需要在关心自己的代码就可以了。

正向代理和反向代理

这里有一篇非常好的文章做了详细解释:正向代理与反向代理有什么区别。我在这里还是简单概述一下:

  • 正向代理:正向代理隐藏了真实的请求客户端,服务端不知道真实的客户端是谁,客户端请求的服务都被代理服务器代替来请求,知名的科学上网工具shadowsocks 扮演的就是典型的正向代理角色。在天朝用浏览器访问 www.google.com 时,被残忍的拒绝了,于是你可以在国外搭建一台代理服务器,让代理帮我去请求 google.com,代理把请求返回的相应结构再返回给我。

  • 反向代理:反向代理隐藏了真实的服务端,当我们请求 www.baidu.com 的时候,背后可能有成千上万台服务器为我们服务,但具体是哪一台,你不知道,也不需要知道,你只需要知道反向代理服务器是谁就好了,www.baidu.com 就是我们的反向代理服务器,反向代理服务器会帮我们把请求转发到真实的服务器那里去。

准备

在本地安装好apache服务器!

怎么做?

  1. 启用proxy模块

    • Windows环境一般是安装了xampp或者wamp。在xampp或者wamp安装目录下,修改httpd.conf配置文件,去掉以下两行前面 # 号,从而启用Apache proxy module。

      LoadModule proxy_module modules/mod_proxy.so
      LoadModule proxy_http_module modules/mod_proxy_http.so
    • Ubuntu:

      sudo apt-get install libapache2-mod-proxy-html
      sudo apt-get install libxml2-dev
      sudo a2enmod proxy proxy_http
  2. 在httpd-vhosts.conf里配置virtualHost实现反向代理:

    <VirtualHost *:80>
        ProxyRequests Off
    
        <Proxy *>
          Order deny,allow
          Allow from all
        </Proxy>
        #ProxyPassReverse /project http://ip_address/project
        ProxyPass /project http://ip_address/project
    </VirtualHost>
    • ProxyRequests Off 指令是指采用反向(reverse)代理

    • ProxyPass 指令允许将一个远端服务器映射到本地服务器的URL空间中

    • 配置完成之后,访问 http://localhost/project 实际就是访问 http://ip_address/project 上的资源

  3. 重启Apache

如何解决web浏览器跨域问题——利用反向代理nginx/apache/nodejs


一般而言,如果后端域名和前端没有部署在同一台机器上,在web端进行网络请求就会出现跨域问题,导致无法调试。


一般的remote开发都会遇到这个问题,这里可以使用jsonp解决这个问题,但是却需要后台进行一些其他的操作,也不适合这套api同时共享给移动端,那么如何在web端进行远程调试,一般我们可以使用反向代理解决这个问题。当然,代理是会使得请求速度变慢的,大概十几-上百ms,所以在线上环境上,可以根据实际业务需求来考量是否使用反向代理这个方式。


然后,反向代理基本所有的server都可以做到,本篇文章就写一下常见的nginx、apache和nodejs的反向代理方法。


nginx:


在server的配置里加入类似于下文的


 location /api/ {
                            proxy_pass    http://suibo.5dktv.com/api/;
                            proxy_redirect default ;
                 }


apache:


找到配置文件httpd.conf


<VirtualHost *:80>  
       ServerAdmin [email protected] 
       ServerName localhost:80

       ProxyRequests Off  

  <Proxy *>  
       Order deny,allow  
       Allow from all  
   </Proxy>  
       ProxyPass /api http://suibo.5dktv.com/api
       ProxyPassReverse /api http://suibo.5dktv.com/api
</VirtualHost>


nodejs:


nodejs的话,如果是用express的话,需要安装express-http-proxy这个模块,用npm安装就好了


安装完成后,


var proxy = require('express-http-proxy');

var app = require('express')();

app.use('/proxy', proxy('www.google.com', {
  forwardPath: function(req, res) {
    return require('url').parse(req.url).path;
  }
}));


类似于这样既可。


三种方法都是可以的,具体用哪种就看对哪种服务器熟悉了。。


利用nginx 反向代理解决跨域问题

  说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题。

  一般来说可以用来做:静态页面的服务器、静态文件缓存服务器、网站反向代理、负载均衡服务器等等,而且实现这一切,基本只需要改改那万能的配置文件即可。

之前的博文记录了作为负载均衡。这里先记录一下作为静态页面的服务器和反向代理跨域的使用。

结合之前 《angularjs+webapi2 跨域Basic 认证授权》的案例,对跨域的方式进行改造一下。

一.静态页面服务器

nginx.conf 的配置(其实默认的也是如此,所以作为静态服务器只需要将静态文件移动到nginx下的html文件夹里就可以了)

 

复制代码

server {
      listen       8094; #监听端口
      server_name  localhost; #

      #charset koi8-r;

      #access_log  logs/host.access.log  main;

     location / {
          root   html;#文件根目录
          index  index.html index.htm;#默认起始页
      }

        }
复制代码

然后打开浏览器 输入 localhost:8094 即可

2MU[LA7GS05[]15JD3[WH(Q

就是这么简单

二.反向代理服务器-》跨域

之前我们跨域是借助了浏览器对 Access-Control-Allow-Origin 的支持。但有些浏览器是不支持的,所以这并非是最佳方案

现在我们来利用nginx 通过反向代理 满足浏览器的同源策略实现跨域

首先,我先注释掉之前的跨域设置

image

image

然后访问一下index1.html

image

提示了跨域问题

然后我们回到nginx.conf 配置一个反向代理路径(新增红色部分)

复制代码
server {
        listen       8094;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

       location / {
            root   html;
            index  index.html index.htm;
        }
        location /apis {
    rewrite  ^.+apis/?(.*)$ /$1 break;
    include  uwsgi_params;
       proxy_pass   http://localhost:1894;
       }
}
复制代码

配置说明:配置一个/apis  重写到我们真正的api地址http://localhost:1894  形成一个代理的过程。

然后更改一下index1.html的api请求地址

image

这样这个api的地址就跟当前页面index1.html处于同源位置了。就是我们配置的nginx监听地址 localhost:8094

然后我们再次在浏览器中访问 index1.html   可能请求到的知识缓存页面 请清除缓存或重启nginx

image

没有了跨域问题。 这里因为我之前登陆过 并记录了 token 所以没有提示登录

小结:写得不是很细,当作笔记,如伤过客,诚挚抱歉。

转载于:https://segmentfault.com/a/1190000007352990

https://blog.csdn.net/xiedong9857/article/details/55518311

https://www.cnblogs.com/bninp/p/5694277.html

文章来源: 如何解决web浏览器跨域问题——利用反向代理nginx/apache/nodejs

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:如何解决web浏览器跨域问题——利用反向代理nginx/apache/nodejs