處理沒有片段的平均值堆棧應用程序地址'＃'

Question

編輯1：這裏是a mini code我做的是重現錯誤。請按照README.md進行安裝。

編輯2：最後，我找到了一個解決方案。除了$locationProvider.html5Mode(true);（$locationProvider.hashPrefix('')對我來說不是必要的）和<base href="/" />，我需要在routes/index.js而不是app.js中添加以下內容。然後，我們不需要再添加任何更多app.js或nginx或Apache，如this thread提及。

var express = require('express'); 
var router = express.Router(); 
var path = require('path'); 
... ... 
router.get('*', function(req, res) { 
    res.sendfile('./views/index.html'); // load our public/index.html sendFile 
    // res.sendFile('index.html', { root: path.join(__dirname, 'views') }); // does not work 
}); 

的一個問題是，在服務器控制檯，它給express deprecated res.sendfile: Use res.sendFile instead routes/index.js:461:9。但res.sendFile('index.html', { root: path.join(__dirname, 'views') });不能幫助，它返回404錯誤。

我的快遞版本是~4.14.0 ......有誰知道如何解決這個問題？

OP：

我的Mac開發與Apache，可以通過 https://localhost:3000/#/home請求均值堆棧的應用程序。在使用NGINX服務器進行生產時，應用程序可通過 https://www.myapp.io/#/home請求。由於angular ui-router，所有情況下都需要片段標識符#。

所以我想讓漂亮的URL，而不#（例如，https://www.myapp.io/home，https://localhost:3000/home）工作。我也做了以下情況：

1. 在app.config(['$stateProvider'...添加$locationProvider.html5Mode(true); $locationProvider.hashPrefix('')。

2. 在index.html

在瀏覽器欄添加<base href="/" />其結果是，自動https://localhost:3000/#/home改變https://localhost:3000/home，類似地對於https://www.myapp.io/#/home。

然而，在瀏覽器將引發一個錯誤直接進入https://localhost:3000/home或https://www.myapp.io/home（我不知道如何在error.ejs把以前<h1><%= message %></h1><h2><%= error.status %></h2><pre><%= error.stack %></pre>到error.html，所以我沒有更多細節）。

所以現在，我們的目標是讓https://localhost:3000/home和https://www.myapp.io/home工作。

通過以下this thread，我添加了如下到app.js：

app.use('/js', express.static(__dirname + '/js')); 
app.use('/dist', express.static(__dirname + '/../dist')); 
app.use('/css', express.static(__dirname + '/css')); 
app.use('/partials', express.static(__dirname + '/partials'));  
app.all('/*', function(req, res, next) { 
    res.sendFile('index.html', { root: __dirname }); 
}); 

而且在蘋果的Apache的，這裏是我的httpd-vhosts.conf，重新啓動apache， https://localhost:3000/home仍然會返回一個錯誤之後。

<VirtualHost *:443> 
    ServerName localhost 
    DocumentRoot "/Users/SoftTimur" 

    SSLEngine on 
    SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL 
    SSLCertificateFile /etc/apache2/ssl/localhost.crt 
    SSLCertificateKeyFile /etc/apache2/ssl/localhost.key 

    <Directory "/Users/SoftTimur"> 
     RewriteEngine on 

     # Don't rewrite files or directories 
     RewriteCond %{REQUEST_FILENAME} -f [OR] 
     RewriteCond %{REQUEST_FILENAME} -d 
     RewriteRule^- [L] 

     # Rewrite everything else to index.html to allow html5 state links 
     RewriteRule^index.html [L] 

     Options Indexes FollowSymLinks 
     AllowOverride All 
     Order allow,deny 
     Allow from all 
     Require all granted 
    </Directory> 
</VirtualHost> 

在生產中，這裏是NGINX服務器模塊。重新啓動NGINX後，https://www.myapp.io/home仍然會返回錯誤。

server { 
    listen 443 ssl; 

    server_name myapp.io www.myapp.io; 

    ssl_certificate /etc/letsencrypt/live/myapp.io/fullchain.pem; 
    ssl_certificate_key /etc/letsencrypt/live/myapp.io/privkey.pem; 

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
    ssl_prefer_server_ciphers on; 
    ssl_dhparam /etc/ssl/certs/dhparam.pem; 
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:EC$ 
    ssl_session_timeout 1d; 
    ssl_stapling on; 
    ssl_stapling_verify on; 
    add_header Strict-Transport-Security max-age=15768000; 

    index index.html; 

    root /opt/myapp; 

    location/{ 
     try_files $uri $uri/ /index.html; 
    } 

    location ~ /.well-known { 
     allow all; 
    } 

    location/{ 
     proxy_set_header Host    $host; 
     proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for; 
     proxy_set_header X-Forwarded-Proto $scheme; 
     proxy_set_header Accept-Encoding  ""; 
     proxy_set_header Proxy    ""; 
     proxy_pass   https://127.0.0.1:3000; 

     # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove sock$ 

     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection "upgrade"; 
    } 
} 

任何人都可以幫忙嗎？

Answer 1

如果只是關於＃。你可以在Angular中刪除它。

只需在您的應用程序條目中注入locationProvider並將htmlMode設置爲true即可。在你的index.html中設置baseUrl。

$locationProvider.html5Mode(true) 

而且在你的index.html添加：

<base href="/" /> 

這將生成網址沒有＃。這有幫助嗎？

Answer 2

在您的Express服務器

var express = require('express'); 
var app = express(); 

app.get('*', function (req, res) { res.sendFile(__dirname + '/views/index.html'); }); 

，並在您的角度應用試試這個：

$locationProvider.hashPrefix('!').html5Mode({ 
    enabled: true 
}); 
$urlRouterProvider.otherwise('/'); 

，你仍然需要在<base href="/">您的index.html

讓我知道，如果這適合你

編輯：

我剛剛在https://github.com/chengtie/mini-mean， 看到您的應用程序看起來像您的app.use順序是錯誤的。請複製粘貼到您的快遞服務器，並檢查現在是否可以。 pastebin

Answer 3

這可能有用的東西，

AngularJS routing without the hash '#'

此外，在您的Express服務器文件中使用此行。 app.use(express.static(path.join(__dirname, 'client folder')));

這將直接認定該意見文件夾，並載入您的index.html文件，它

Answer 4

1. 你不需要Apache或Nginx的運行發展中的NodeJS，只是node server.js足夠
2. 快遞因爲您使用的是棄用的API res.sendfile，因此請使用res。SENDFILE（大寫F）
3. 做SPA的一些信息：
   • 當你在你的URL中的「＃」，瀏覽器將它解釋爲一個局部引用，因此，不會發出新的請求到服務器
   • 通過啓用$locationProvider.html5Mode(true)您現在使用HTML5按壓狀態下方便瀏覽的應用歷史，（如果我沒有記錯的話，你都發生在使用）的角度有效地去除「＃」在URL
   • 沒有「＃ '（hash-bang）瀏覽器會將其解釋爲新請求並將其發送到服務器，因此您必須將所有請求從服務器映射到SPA入口文件
   • 用於複製這種行爲的具體步驟，請參閱這篇文章：https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag（在你的入口文件的基本href是重要的）