web-dev-qa-db-ja.com

クロスドメインAJAXに使用するために、Apacheでリバースプロキシを正しく構成する方法

同時にAPIに大きく依存しているが、API自体と同じドメインに存在できないWebアプリケーションを開発する必要があるため、非同期HTTPリクエストを行うときに「同じオリジンポリシー」を回避するのは非常に難しい（AJAX）。ある時点で、自分のコンピューター（Windows 7を実行している）にWAMPをインストールし、Apacheでリバースプロキシを構成することを勧められました。 dev /という名前のIP 127.0.0.1のエイリアスを作成するように指示した後、同じ人がhttpd.confファイルに追加した以下のApacheディレクティブを私に与えました、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>

私はサーバーの設定に関してはまったくの初心者なので、ディレクティブを貼り付けるだけで、幸いなことにプロキシは機能しました。ブラウザのアドレスバーを使用して、たとえばhttp://dev:8080/a/w/currenciesにアクセスすると、APIから正しい応答が返されます。

ただし、残念ながら、AJAX同じURLへのリクエスト（コードは以下））により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から取得してdev：8080に変換することです」と言われました。私の経験不足を考えると、これはあまり意味がありません。

ajaxapachecross-domainwampserver
10
Andrei Oniga

パブリックIPを備えたサーバーがあり、Apacheが実行されています。ここで、アプリケーションをLANでホストし、インターネットからアクセスできるようにする必要があります。重要な部分は、これらのアプリケーションが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をホストしています。Debianベースのシステムの場合、vhost定義はWebサイトの定義が行われます。

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

ここで* confは

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

これらの各サイトの仮想ホスト定義は次のようになります

/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の部分に来ています

in chrome Ctrl + Shift + Iを押すと、アプリケーションがどこで壊れているかがわかります。手がかりが得られます（上のマシンとは異なるマシンからリクエストを発行しますWebアプリケーションを開発している場合）また、AJX APIを含むhttp://sampleページからのリクエストが実際にApacheサーバーに到達し、プロキシがリクエストが正しくない場合は、live_httpなどのFirefoxのツールを使用して、HTTPヘッダーを投稿します。リクエストがない場合の条件と、アプリケーションがリクエストを作成したときの条件を使用して、ヘッダーを監視することで、リクエストが背後のサーバーに到達した場合に役立ちます。リバースプロキシ。Webからのリクエストが到達したかどうか、リクエストがリクエストされたURLに到達したかどうか、リバースプロキシを実行しているサーバーのログも確認します。これにより、手掛かりが得られます。

そして、.confファイルの開発目的のために、しばらくの間テストするために書き換えルールを無効にし、1つずつ実行します。

10
Registered User

ここでの問題は、ブラウザがWebページに配置されたランダムなJavaScriptに騙されないようにするためです。すべてのjavascriptを同じコンテキストで実行できるようになると、悪意のあるユーザーがFacebookセッションのCookieやその他のデータを失うことになります。

この場合、犯人はChromeは 'dev'を完全修飾ドメイン名とは見なさないため、同じOriginテストに失敗します。 app.somesite.devからコンテンツを取得している時点で、ある時点で 'dev'にリクエストを送信します

サーバーは何を送信するかを気にしません。すべてが同じホストからのものであると信じるためにだます必要があるブラウザーです。

  1. Hostsファイルの「dev」をdev.example.com 127.0.0.1に置き換えます
  2. 私は、Apacheプロキシから出てくるすべてが、どのサーバーからのものであっても、dev.example.comのみを参照することを確認します
  3. コードではdev.example.comのみを使用してください

他のすべてが失敗した場合は、HTTPヘッダー「Access-Control-Allow-Origin：*」を追加して任意のOriginを許可できますが、dev-environments以外ではこれを使用しません。

PS。 example.com:80からjavascriptを取得したとしても、そのjavascriptはexample.com:443を呼び出すことさえできず、example.comからのjavascriptはdev.example.comにxmlhttprequestsを作成できません

1
user2977023

127.0.0.1では、HTMLコードは次のようになります。

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

127.0.0.1では、Apache confは次のようになります。

...

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

この場合、URLとajaxは同じドメインを使用しているため、ブラウザーはクロスドメインになりませんが、正確には、ajaxリクエスト https://app.somesite.com:5002/ 、それがリバースプロキシであるかどうかはわかりませんが、私にとってはうまくいくようです。試してみてください:)

0
HornedReaper