Why does angular2-webpack-starter work with:' localhost:3000/#/', but Not with 'https://hostname/front/#/' WHY?

Question

I am using the 'angular2-webpack-stater' project and am ready to integrate with with my back end server. I setup nginx with two proxy-passes to connect to the front-end and the back-end:

server {
    listen [::]:443 ssl;
    listen 443 ssl;
    server_name xxxxxxxxx.com;
    add_header Strict-Transport-Security "max-age=31536000; 
          includeSubdomains";
    root /var/www;
    index index.php index.html index.htm;
    autoindex off;
    rewrite_log on;

  location ^~ /server/ {
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   Host      $host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass https://127.0.0.1:9000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  location ^~ /front/ {
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   Host      $host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass https://127.0.0.1:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
...
}

The back-end works as expected. And when I run the front-end with 'npm run server', the browser opens at 'localhost:3000/#/' and all works as expected.

BUT when I attempt to access the frontend with:

https://xxxxxxx.com/front/#/

(instead of using localhost:3000/#/) I see:

<% if (webpackConfig.htmlElements.headTags) { %> <%= webpackConfig.htmlElements.headTags %> <% } %> Loading... <% if (htmlWebpackPlugin.options.metadata.isDevServer && htmlWebpackPlugin.options.metadata.HMR !== true) { %> <% } %>

because there is an error when attempting the GET of:

https://xxxxxxx.com/webpack-dev-server.js

from the index.html file. This fails at: <script src="/webpack-dev-server.js"></script> since it cannot locate the webpack-dev-server.js file.

Why in the world is there any difference? For anyone who been down this path, your help would be greatly appreciated. I have looked high and low, and no solution has yet been found. What is magic about access through the localhost and not the host name? I have linked:

/var/www/front --> project/src or project/dist and had no luck!

This doesn't feel like it should be this hard! Clearly I don't understand how webpack and webpack-dev-server serve static files.

THANKS!!

Aside: For anyone attempting to solve the cors issues on the server side (the express server) I needed to add this code in my app.js file:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});

app.options("/*", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, x-xsrf-token');
  res.sendStatus(200);
});

This then allowed complete communication from the front-end to the back-end on a different port.

score 2 · Accepted Answer · answered Mar 28 '17 at 09:07

2

The front-end requires additional resources, which it requests relative to the root. You are trying to force it into a subdirectory.

Clearly the URI /webpack-dev-server.js works at //127.0.0.1:3000, but needs to be /front/webpack-dev-server.js when accessed from //example.com.

This is a very common problem, and some applications can be very stubborn about being forced into a subdirectory.

Depending on how much control you have over the application, you might consider:

1) Using path-relative URIs rather than path-absolute URIs. For example:

src="webpack-dev-server.js"

2) Configuring your application to use the correct subdirectory (which will of course break //127.0.0.1:3000 instead). For example:

src="/front/webpack-dev-server.js"

3) If this is a single purpose server, move the front-end into the root. For example:

location ^~ /server/ {
    proxy_pass https://127.0.0.1:9000/;
    ...
}
location / {
    proxy_pass https://127.0.0.1:3000;
    ...
}

answered Mar 28 '17 at 09:07

Richard Smith

45,711
6
82
81

Your information was quite helpful and it pointed me in the right direction. Thanks. I added a proxy at the root, to convert https access to the port 3000 to connect with the front end. -- and all is now working! ??? are there any issues with doing a proxy_pass http://127.0.0.1:3000/; -- i wouldn't believe so. – JoelParke Mar 28 '17 at 17:40
You mean without the trailing `/`? See [this document](http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pass) for details, but substituting `/` for `/` serves no purpose, so leaving it off is slightly more efficient. – Richard Smith Mar 28 '17 at 21:12
I worked on this issue some more in the case of a HTTPS server and solved another issue that might be helpful to others that follow this post. For those interested see: http://stackoverflow.com/questions/43081342/webpack-dev-server-with-nginx-proxy-pass-for-https-domain-causes-neterr-conne – JoelParke Mar 29 '17 at 20:09

Why does angular2-webpack-starter work with:' localhost:3000/#/', but Not with 'https://hostname/front/#/' WHY?

1 Answers1

Linked