相对路径问题 Angular js 应用程序从 nginx 代理传递中提供服务时答案

【问题标题】：Relative path issue angular js application when it serve from in nginx proxy pass相对路径问题 Angular js 应用程序从 nginx 代理传递中提供服务时
【发布时间】：2016-09-04 11:22:35
【问题描述】：

我有一个 Angular js 应用程序，它从在 locahost:8050 运行的节点服务器提供服务。当我点击 localhost:8050 时它运行良好。但我希望该请求将通过代理到达 localhost:8050，所以我设置了 nginx，如下所示：

server {
    listen 80;
    server_name ingl.sorc.com;
    location /portal/gen/ {
        proxy_pass http://localhost:8050;    
        }
}

并在 etc hosts 文件中创建 127.0.0.1 ingl.sorc.com 条目。

所以当我点击 ingl.sorc.com/portal/gen/ 这个 URL 时，它会显示一个空白页面。它显示空白页，因为它尝试从“http://ingl.sorc.com/styles/vendor.a31e3c2d.css”和“http://ingl.sorc.com/styles/vendor.st34hj.js”获取 css 和 js 文件，这些文件最终不存在于特定路径中。

我正在使用 grunt 来构建 Angular 应用程序。在 index.html 中构建应用程序后，使用相对路径将 css 和 js 添加到页面中。例如：

<link rel="stylesheet" href="styles/main.46a5c195.css">
<script src="scripts/vendor.7925e705.js"></script>

请帮助我。我不知道如何解决这个问题。

【问题讨论】：

标签： angularjs node.js nginx

【解决方案1】：

您需要为样式添加一个有效条目。尝试类似

server {
    listen 80;
    server_name ingl.sorc.com;
    location /portal/gen/ {
        proxy_pass http://localhost:8050;    
    }
    location /styles/ {
        # you'll have to find the right path 
        proxy_pass http://localhost:8050/styles; 
    }    

}

【讨论】：