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服务器！

怎么做？

启用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

在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 上的资源
重启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 即可

就是这么简单

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

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

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

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

然后访问一下index1.html

提示了跨域问题

然后我们回到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请求地址