どのネットワークからでも別のポートを使ってapiにアクセスするには？

Question

私の使用例では、フロントエンドのjavascriptでいくつかのAPIを使用しています。これらのAPIエンドポイントはポート80

以外の別のポート番号を使用して私のアプリケーションのフォルダ構造は以下のように見える、それぞれポート80と8081で実行している2台のサーバーが

app/ 
    view-events.js 
    view.html 

があります。 domain.com/view/ apiは80から返されます。このview-events.jsは、http://domain.com:8081/api/services/featured-data/のようないくつかのAPIを使用します。

http://www.domain.com/view/と呼ぶと、ページはロードされますが、http://domain.com:8081/api/services/featured-data/のコンポーネントはロードされません。これは少数のネットワーク[主に企業ネットワーク]でのみ発生します。一部の企業ネットワークでは80以外のポートは許可されていないためです。

どうすればこの問題を解決できますか？

誰かが私にこれを手伝ってもらえますか？ありがとう

Answer 1

これを行うには、通常の方法では、ポート80上で実行されているリバースプロキシ（通常はApacheまたはnginxまたはHAProxy）のいくつかの種類を持っていることであり、唯一のサービスがポート上で実行することができますので、それは（適切なAPIにリクエストを敗走していますあなたのapisは8081、8082などで実行されます）。 （これはポート80で動作していない1つのサービスでも一般的な設定です。たとえば8080上で実行されているTomcatの前でApacheが80で動作していることがよくあります。

Apacheの例の.confは次のようになります。

<VirtualHost *:80> 
    ServerName example.com 

    DocumentRoot /var/www/html/static-html-for-example.com-if-needed 

    <Directory /var/www/html/static-html-for-example.com-if-needed> 
    Options +Indexes 
    Order allow,deny 
    Allow from all 
    </Directory> 

    #LogLevel debug 
    ErrorLog logs/error_log 
    CustomLog logs/access_log common 

    ProxyPass  /api1 http://127.0.0.1:8081/api1 
    ProxyPassReverse /api1 http://127.0.0.1:8081/api1 

    ProxyPass  /api2 http://127.0.0.1:8082/api2 
    ProxyPassReverse /api2 http://127.0.0.1:8082/api2 

    # backend api even does not have to be on the same server, it just has to be reachable from Apache 
    ProxyPass  /api3 http://10.10.101.16:18009/api3 
    ProxyPassReverse /api3 http://10.10.101.16:18009/api3 
</VirtualHost> 

そしてここでは、アプリやAPIのサンプルnginxのconfにある[2台のサーバ]：

upstream app { 
    server 127.0.0.1:9090; 
    keepalive 64; 
} 

upstream api { 
    server 127.0.0.1:8081; 
    keepalive 64; 
} 

# 
# The default server 
# 
server { 
    listen 80; 
    server_name _; 

    location /api { 
    rewrite /api/(.*) /$1 break; 
    proxy_pass http://api; 
    proxy_redirect off; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Proto $scheme; 
    proxy_set_header Host $http_host; 
    proxy_set_header X-NginX-Proxy true; 
    real_ip_header  X-Forwarded-For; 
     real_ip_recursive on; 
    #proxy_set_header Connection ""; 
    #proxy_http_version 1.1; 
    } 

    location /{ 
    rewrite /(.*) /$1 break; 
    proxy_pass http://app; 
    proxy_redirect off; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Proto $scheme; 
    proxy_set_header Host $http_host; 
    proxy_set_header X-NginX-Proxy true; 
    real_ip_header  X-Forwarded-For; 
     real_ip_recursive on; 
    #proxy_set_header Connection ""; 
    #proxy_http_version 1.1; 
    } 

    # redirect not found pages to the static page /404.html 
    error_page 404 /404.html; 
    location = /404.html { 
    root /usr/share/nginx/html; 
    } 

    # redirect server error pages to the static page /50x.html 
    error_page 500 502 503 504 /50x.html; 
    location = /50x.html { 
    root /usr/share/nginx/html; 
    } 
} 

Answer 2

ベストソリューションは、安全な理由から、ポート80でapiを変更することです。

もしそうでなければ、あなたはjsonpによってこの問題を解決できます。 8081 APIを呼び出すと、ウェブページからクロスドメインコールを行うだけです。

jsonpを使用することを決定した場合は、ここをクリックしてください。面倒であり、あなたがそう示唆してい

How to make a JSONP request from Javascript without JQuery?

。