为什么 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/#/ 

(而不是使用本地主机：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

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

为什么世界上有什么不同？ 对于任何走过这条路的人，您的帮助将不胜感激。 我看了高看低，还没有找到解决方案。 通过本地主机而不是主机名进行访问有什么魔力？ 我已经链接了：

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

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

谢谢！！

---

旁白： 对于任何试图解决服务器端(快速服务器)的 cors 问题的人，我需要在我的应用程序.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;
...
}