How to access api using different port from any network?

Question

In my use case I am using some api's in the frontend javascript. These api endpoints uses different port number other than port 80.

My application folder structure looks like below,

app/
   view-events.js
   view.html

there are two servers running in port 80 and 8081 respectively. domain.com/view/ api will be returned from 80. This view-events.js uses some api's like http://domain.com:8081/api/services/featured-data/ .

So when I call http://www.domain.com/view/ the page loads but the components from http://domain.com:8081/api/services/featured-data/ are not loading. This happens only in few networks [mostly corporate networks]. Because port other than 80 is not allowed in some corporate networks.

How can I get rid of this problem?

Could someone help me with this? Thanks

Well, assuming that you cannot change those corporate networks, you will obviously have to serve your api at port 80 as well. — Bergi, Jul 20 '16 at 07:17

score 1 · Accepted Answer · edited Jul 21 '16 at 03:58

The usual way to do this is to have some kind of reverse proxy (usually Apache or nginx or HAProxy) running on port 80, and have it rout the requests to appropriate api (since only one service can run on on port, your apis will then run for example on 8081, 8082, etc..). (This is common setup even with one service that is not running on port 80, for example you can often find Apache running on 80 in front of the Tomcat running on 8080).

The example .conf for Apache could be:

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

And here is a sample nginx conf for app and api [two servers]:

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

Thank you for your answer. I really appreciate your help. I started with nginx based on our discussion. Is there any nginx conf you have? It would be very helpful. I am following [nginx-reverse-proxy](https://www.nginx.com/resources/admin-guide/reverse-proxy/) setups — Dany, Jul 20 '16 at 08:37

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

Best solution is to change the api in port 80, just for secure reason.

if not, you can solve this question by jsonp. When you call the 8081 api, you just make a cross-domain call from the web page.

if you decide you use jsonp, here is the detail solution.

How to make a JSONP request from Javascript without JQuery?

which is tedious and not suggest you do so.

edited May 23 '17 at 12:08

Community

1
1

answered Jul 20 '16 at 07:33

kangbin

1
1

Thanks kangbin. I am using single ec2 instance to run both servers. To run on port 80 I have to launch another instance[Which costs extra and it is unnecessary. It is a very small application]. Other wise I need to change the code to use the same server for both API's. Is there any other way to do this? – Dany Jul 20 '16 at 08:02
got you situation. just as i said, you can move your 8081 api to you 80, or just use jsonp to get data from 8081, which need you to modify your 8081 api return data structure. that's my solution, hope helpful to you :) – kangbin Jul 20 '16 at 08:36

How to access api using different port from any network?

2 Answers2