如何使用Apache正确配置反向代理,以用于跨域AJAX？

Question

需要开发一个Web应用程序,同时高度依赖于API但同时不能与API本身驻留在同一个域中,在进行异步HTTP请求时绕过"同源策略"非常棘手(AJAX).有一次,我建议在我的计算机上安装WAMP(运行Windows 7)并使用Apache配置反向代理.同一个人给了我下面的Apache指令,我httpd.conf告诉我在文件中创建名为dev的IP 127.0.0.1的别名后,我添加到文件中c:\windows\system32\drivers\etc\hosts(我做了):

LoadModule headers_module modules/mod_headers.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule ssl_module modules/mod_ssl.so

Listen 127.0.0.1:8080
ProxyRequests off

<Proxy *>
                Order deny,allow
                Deny from all
                Allow from 127.0.0.1
</Proxy>

<VirtualHost dev:8080>
                ProxyPass / https://app.somesite.com:5002/
                ProxyPassReverse / https://app.somesitecom:5002/
                ProxyPassReverseCookieDomain app.somesite.com dev
                Header edit Location ^https://dev(:8080)?(.+)$ http://dev$1$2
                Header edit Set-Cookie "(^.+); secure; HttpOnly$" "$1; HttpOnly"
                SSLProxyEngine on
    SSLProxyVerify none
</VirtualHost>

由于我在配置服务器时是一个完整的新手,我只是粘贴了指令,幸运的是,代理工作了.例如,当我使用浏览器的地址栏访问时,它会从API返回正确的响应http://dev:8080/a/w/currencies.

不幸的是,对同一网址(代码如下)的AJAX请求会让Chrome给我XMLHttpRequest cannot load http://dev:8080/a/w/currencies. Origin http://dev is not allowed by Access-Control-Allow-Origin.错误.

$.ajax({
    url: "http://dev:8080/a/w/currencies",
    type: "GET",
    dataType: "json",
    data: {

    },
    success: function(data){
        console.log(data);
    }
}); 

那么为了让这个代理与AJAX一起工作还必须做些什么呢？我被告知一个关于alias指令的事情,但不够具体和清楚,所以对我没有经验的大脑没有多大意义.

PS:另外,我被告知" 问题是你从dev:80和ajaxing到dev:8080获取文件 ".鉴于我的经验不足,这都没有多大意义.

Answer 1

您正在使用具有公共IP的服务器并且正在运行apache.现在您希望在LAN上托管应用程序并且还希望它们可以在Internet上访问,重要的是这些应用程序仍然在LAN上的计算机上运行.

                           |--------------192.168.1.3
                           |            (internal3.example.com)
                           |
                           |--------------192.168.1.4
                           |            (internal4.example.com)
  (Public IP )             |
            A--------------|
(reverse proxy server)     |
  (192.168.1.25)           |
example.com                |
                           |--------------192.168.1.1
                           |            (internal1.example.com)
                           |
                           |--------------192.168.1.2
                           |            (internal2.example.com)

我正在使用Ubuntu来托管Apache vhost定义,以防基于Debian的系统完成网站的定义

/etc/apache2/sites-enabled/*.conf

其中*conf对应

internal1.conf internal2.conf internal3.conf internal4.conf

每个站点的vhost定义如下

/etc/apache2/sites-enabled/internal1.example.conf

  ServerAdmin webmaster@localhost
  ServerName internal1.example.com
  ProxyRequests off
  <proxy *>
  Order deny,allow
  Allow from all
  </proxy >
  ProxyPass / http://192.168.1.1/
  ProxyPassReverse / http://192.168.1.1/ </VirtualHost >

/etc/apache2/sites-enabled/internal2.example.conf

<virtualhost *:80>

      ServerAdmin webmaster@localhost
      ServerName internal2.example.com
      ProxyRequests off
      <proxy *>
      Order deny,allow
      Allow from all
      </proxy >
      ProxyPass / http://192.168.1.2/
      ProxyPassReverse / http://192.168.1.2/
</VirtualHost >

/etc/apache2/sites-enabled/internal3.example.conf

<virtualhost *:80>

      ServerAdmin webmaster@localhost
      ServerName internal3.example.com
      ProxyRequests off
      <proxy *>
      Order deny,allow
      Allow from all
      </proxy >
      ProxyPass / http://192.168.1.3/
      ProxyPassReverse / http://192.168.1.3/
</VirtualHost >

/etc/apache2/sites-enabled/internal4.example.conf

      ServerAdmin webmaster@localhost
      ServerName internal4.example.com
      ProxyRequests off
      <proxy *>
      Order deny,allow
      Allow from all
      </proxy >
      ProxyPass / http://192.168.1.4/
      ProxyPassReverse / http://192.168.1.4/
</VirtualHost >

请注意,在上述所有vhost定义中,我删除了日志文件的选项.因此,如果您应用于生产服务器,请在每个vhost文件中添加它们.以上只是为了给你一个明确的例子,说明它是如何工作的.我运行一个非常复杂的Apache设置,所以上面只是一个小例子来帮助你.

现在来到Ajax你问题的一部分

在Chrome中按Ctrl + Shift +我你会看到应用程序的确切位置,它会给你一些线索,(从你开发Web应用程序的机器发出不同机器的请求),如果你能看一下如果来自http://sample具有ajx api的页面的请求实际到达您的apache服务器将提供更多提示,如果代理正在转发您的请求,请使用firefox中的某些工具(如live_http)发布HTTP HEADERS,如果没有请求和应用程序发出请求时的条件,如果请求到达反向代理后面的服务器,可以帮助您,如果来自Web的请求到达它,也检查正在运行反向代理的服务器的日志或者不是,如果请求到达了所请求的URL.这将给你一个线索,

并且为了在.conf文件中进行开发,禁用重写规则一段时间进行测试,逐个执行.