为什么 angular2-webpack-starter 与：'localhost:3000/#/' 一起工作，而不与 'https://hostname/front/#/' 一起工作，为什么？

Question

我正在使用 'angular2-webpack-stater' 项目并准备好与我的后端服务器集成。我使用两个代理通道设置 nginx 以连接到前端和后端：

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

后端按预期工作。当我运行使用 'npm run server' 的前端时，浏览器在 'localhost:3000/#/' 处打开并且一切都按预期工作。

但是当我尝试访问前端时：

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

（而不是使用 localhost:3000/#/）我看到：

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

因为尝试 GET 时出错：

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

来自 index.html 文件。这在以下位置失败：<script src="/webpack-dev-server.js"></script> 因为它找不到 webpack-dev-server.js 文件。

为什么世界上有什么不同？对于走这条路的任何人，将不胜感激您的帮助。高高低低看了一圈，至今没有找到解决办法。通过 localhost 而不是主机名访问有什么神奇之处？我已链接：

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

感觉不应该这么难！显然我不明白 webpack 和 webpack-dev-server 如何提供静态文件。

谢谢！！

旁白：对于任何试图在服务器端（快速服务器）解决 cors 问题的人，我需要在我的 app.js 文件中添加此代码：

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

然后允许在不同端口上从前端到后端的完整通信。

Answer 1

前端需要额外的资源，它请求相对于根。您正试图将其强制放入子目录。

显然 URI /webpack-dev-server.js 在 //127.0.0.1:3000 有效，但从 //example.com.

访问时需要为 /front/webpack-dev-server.js

这是一个非常普遍的问题，一些应用程序可能非常顽固地不愿意被强制进入子目录。

根据您对应用程序的控制程度，您可以考虑：

1) 使用路径相对 URI 而不是路径绝对 URI。例如：

src="webpack-dev-server.js"

2) 配置您的应用程序以使用正确的子目录（这当然会破坏 //127.0.0.1:3000）。例如：

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

3) 如果这是一个单一用途的服务器，将前端移动到根目录中。例如：

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

为什么 angular2-webpack-starter 与：'localhost:3000/#/' 一起工作，而不与 'https://hostname/front/#/' 一起工作，为什么？

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

nginx

webpack-dev-server

webpack-2

starter-kits