Wie kann man mit einem anderen Port von einem beliebigen Netzwerk auf API zugreifen?

Question

In meinem Fall verwende ich einige APIs im Frontend Javascript. Diese api Endpunkte verwendet verschiedene andere Portnummer als Port 80.

Meine Anwendung Ordnerstruktur sieht unten wie,

app/ 
    view-events.js 
    view.html 

gibt es zwei Servern, auf denen in den Port 80 und 8081 jeweils. domain.com/view/ api wird von 80 zurückgegeben. Diese view-events.js verwendet einige APIs wie http://domain.com:8081/api/services/featured-data/.

So, wenn ich http://www.domain.com/view/ aufrufen die Seite lädt aber die Komponenten von http://domain.com:8081/api/services/featured-data/ werden nicht geladen. Dies geschieht nur in wenigen Netzwerken [meist Unternehmensnetzwerke]. Da ein anderer Port als 80 in einigen Unternehmensnetzwerken nicht zulässig ist.

Wie kann ich dieses Problem loswerden?

Könnte mir jemand dabei helfen? Danke

Answer 1

Der übliche Weg, dies zu tun, ist eine Art von Reverse-Proxy haben (in der Regel Apache oder nginx oder HAProxy) läuft auf Port 80 zur Verfügung und die Anforderungen an entsprechende api Router (da nur ein Dienst kann auf über Port laufen , deine apis läuft dann zB auf 8081, 8082, etc ..). (Dies ist eine allgemeine Konfiguration, selbst wenn ein Dienst nicht auf Port 80 ausgeführt wird. Beispielsweise kann Apache häufig auf 80 vor dem Tomcat unter 8080 ausgeführt werden).

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

Und hier ist eine Probe nginx conf für App und api [zwei Server]:

könnte das Beispiel Conf für Apache sein

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

Beste Lösung ist, die API in Port 80 zu ändern, nur aus sicheren Grund.

Wenn nicht, können Sie diese Frage von jsonp lösen. Wenn Sie die 8081 API anrufen, führen Sie einfach einen domänenübergreifenden Anruf von der Webseite aus.

Wenn Sie sich entscheiden, jsonp zu verwenden, hier ist die Detaillösung.

How to make a JSONP request from Javascript without JQuery?

, die mühsam und schlagen Sie nicht so tun.