it-swarm.com.de

Wie konfiguriere ich einen Reverse Proxy mit Apache, der für domänenübergreifendes AJAX verwendet wird?

Die Entwicklung einer Webanwendung, die gleichzeitig stark von einer API abhängig ist, sich aber nicht in derselben Domäne wie die API selbst befinden kann, war recht schwierig, bei asynchronen HTTP-Anforderungen die "Same Origin Policy" zu umgehen (Ajax). Zu einem bestimmten Zeitpunkt wurde mir empfohlen, WAMP auf meinem Computer (unter Windows 7) zu installieren und einen Reverse-Proxy mit Apache zu konfigurieren. Dieselbe Person gab mir die folgenden Apache-Direktiven, die ich zur httpd.conf-Datei hinzugefügt hatte, nachdem sie mich angewiesen hatte, einen Alias ​​für die IP 127.0.0.1 mit dem Namen dev in der Datei unter c:\windows\system32\drivers\etc\hosts (which Ich tat):

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>

Da ich ein absoluter Neuling in der Serverkonfiguration bin, habe ich einfach die Anweisungen eingefügt und glücklicherweise hat der Proxy funktioniert. Es gibt die richtige Antwort von der API zurück, wenn ich die Adressleiste des Browsers verwende, um beispielsweise auf http://dev:8080/a/w/currencies zuzugreifen.

Leider gibt Chrome bei einer AJAX -Anforderung an dieselbe URL (Code unten) den XMLHttpRequest cannot load http://dev:8080/a/w/currencies. Origin http://dev is not allowed by Access-Control-Allow-Origin.-Fehler aus.

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

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

Was muss also noch getan werden, damit dieser Proxy mit AJAX funktioniert? Mir wurde etwas über eine alias-Direktive erzählt, aber nicht spezifisch und klar genug, so dass es für mein unerfahrenes Gehirn wenig Sinn machte.

PS: Außerdem wurde mir gesagt " das Problem ist, dass Sie die Dateien von dev: 80 bekommen und ajaxing zu dev: 8080 ". Aufgrund meiner Unerfahrenheit macht dies auch keinen großen Sinn.

10
Andrei Oniga

Sie verfügen über einen Server mit einer öffentlichen IP-Adresse, auf dem Apache ausgeführt wird. Jetzt möchten Sie Ihre Anwendungen auf LAN hosten und auch darauf, dass sie über das Internet erreichbar sind. Wichtig ist, dass diese Anwendungen auf den Computern auf LAN noch laufen.

                           |--------------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)

Ich verwende Ubuntu, um Apache zu hosten, die vhost-Definition für Debian-basierte Systeme, auf denen die Definition von Websites vorgenommen wird

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

wobei * conf entspricht

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

Die vhost-Definition für jede dieser Sites ist wie folgt

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

  ServerAdmin [email protected]
  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 [email protected]
      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 [email protected]
      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 [email protected]
      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 >

Beachten Sie, dass in allen oben genannten vhost-Definitionen die Optionen für Protokolldateien gelöscht wurden. Wenn Sie sich also auf einem Produktionsserver bewerben, fügen Sie sie in jede der vhost-Dateien ein. Dies ist nur ein klares Beispiel Wie es funktionieren kann ... Ich führe ein sehr komplexes Apache-Setup aus. Oben ist nur ein kleines Beispiel, um Ihnen zu helfen.

Nun kommt ein Teil Ihrer Frage zu Ajax

in Chrome drücken Sie STRG + UMSCHALT + I, und Sie werden sehen, wo genau die Anwendung defekt ist Sie erhalten einen Anhaltspunkt. ( Die Anforderung wird von einer Maschine ausgegeben, die sich von der Maschine unterscheidet, auf der Sie eine Webanwendung entwickeln. ) Auch wenn Sie Apache-Protokolle anzeigen können, wenn die Anforderung von http://sample Page, die über ajx api verfügt, tatsächlich Ihren Apache-Server erreicht hat, der weitere Hinweise enthält. Wenn der Proxy Ihre Anforderung korrekt weiterleitet, senden Sie die HTTP-HEADERS mit einigen tool in firefox wie live_http im Zustand, wenn keine Anforderung vorhanden ist, und die Bedingung, wenn die Anforderung von der Anwendung auf diese Weise gemacht wurde. Wenn Sie die Kopfzeilen beobachten, können Sie helfen, wenn die Anforderung den Server hinter dem Reverse-Proxy erreicht. Überprüfen Sie außerdem die Protokolle des Servers Reverse-Proxy wird ausgeführt, wenn die Anforderung aus dem Web sie erreicht hat oder nicht, und wenn die Anforderung die angeforderte URL erreicht hat. Dies gibt Ihnen einen Hinweis.

und zu Entwicklungszwecken in Ihren .conf-Dateien deaktivieren Sie die Umschreiberegeln für einige Zeit, um sie zu testen, tun Sie dies nacheinander.

10
Registered User

Das Problem hierbei ist, dass der Browser versucht, Sie vor zufälligen Javascript-Vorgängen auf einer Webseite zu schützen. Wenn alle Javascript in demselben Kontext laufen würde, würden Sie Ihre Facebook-Session-Cookies oder andere Daten an böse Jungs verlieren.

In diesem Fall könnte der Übeltäter so einfach sein, da Chrome "dev" nicht als vollqualifizierten Domänennamen betrachtet, sodass derselbe Origin-Test nicht bestanden wird. Ein anderer Grund könnte sein, dass Sie irgendwann Sachen von app.somesite.dev erhalten und irgendwann Anfragen an 'dev' senden.

Den Servern ist es egal, was sie senden, und es ist der Browser, den Sie täuschen müssen, um zu glauben, dass alles vom selben Host kommt

  1. Ich würde 'dev' in der hosts-Datei durch dev.example.com 127.0.0.1 ersetzen
  2. Ich würde sicherstellen, dass alles, was aus dem Apache-Proxy kommt, nur auf dev.example.com verweist, egal von welchem ​​Server es kommt
  3. Verwenden Sie nur dev.example.com in Ihrem Code

Wenn alles andere fehlschlägt, können Sie einen HTTP-Header "Access-Control-Allow-Origin: *" hinzufügen, um Origin zuzulassen. Ich würde dies jedoch nur in dev-Umgebungen verwenden.

PS. Selbst wenn Sie Javascript von example.com:80 erhalten, kann JavaScript nicht einmal example.com:443 aufrufen, oder JavaScript von example.com kann keine xmlhttprequests an dev.example.com stellen

1
user2977023

in 127.0.0.1 sollte Ihr HTML-Code folgendermaßen lauten:

$.ajax({
    url: "http://127.0.0.1/a/w/currencies",
    type: "GET",
    dataType: "json",
    data: {
    },
    success: function(data){
        console.log(data);
    }
}); 

auf 127.0.0.1 sollte Ihr Apache-Conf Folgendes sein:

...

<VirtualHost dev:8080>
            ...
            ProxyPass / https://app.somesite.com:5002/
            ProxyPassReverse / https://app.somesitecom:5002/
            ...
</VirtualHost>

in diesem Fall wird Ihr Browser nicht domänenübergreifend verwendet, da Ihre URL und Ajax dieselbe Domäne verwenden. Aber genau, ajax request https://app.somesite.com:5002/ , ich nicht weiß, ob es ein Reverse-Proxy ist, aber es scheint mir gut zu gehen. Probieren Sie es aus :)

0
HornedReaper