Handle die Mean-Stack-Anwendungsadresse ohne Fragment '#'

Question

Edit 1: Hier ist a mini code Ich habe gemacht, dass reproduziert den Fehler. Bitte folgen Sie README.md, um zu installieren.

Bearbeiten 2: Schließlich fand ich eine Lösung. Neben $locationProvider.html5Mode(true); ($locationProvider.hashPrefix('') ist nicht notwendig für mich) und <base href="/" />, muss ich die folgenden in routes/index.js, anstatt app.js hinzufügen. Dann müssen wir nichts mehr zu app.js oder Nginx oder Apache wie this thread Erwähnungen hinzufügen.

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

Ein Problem ist, in der Server-Konsole gibt es express deprecated res.sendfile: Use res.sendFile instead routes/index.js:461:9. Aber res.sendFile('index.html', { root: path.join(__dirname, 'views') }); kann nicht helfen, es gibt 404 Fehler zurück.

Meine Express-Version ist ~4.14.0 ... kann jemand das beheben?

OP:

ich in Mac mit Apache eine MEAN-Stack-Anwendung entwickeln, die von https://localhost:3000/#/home angefordert werden kann. In der Produktion mit einem NGINX-Server kann die Anwendung von https://www.myapp.io/#/home angefordert werden. Die Fragmentkennung # wird in allen Fällen wegen angular ui-router benötigt.

Also wollte ich hübsche URL ohne # (zB https://www.myapp.io/home, https://localhost:3000/home) arbeiten lassen. Ich habe folgendes getan:

1. hinzugefügt $locationProvider.html5Mode(true); $locationProvider.hashPrefix('') in app.config(['$stateProvider'....

2. hinzugefügt <base href="/" /> in index.html

Als Ergebnis https://localhost:3000/#/home Änderungen automatisch zu https://localhost:3000/home im Browser bar, in ähnlicher Weise für https://www.myapp.io/#/home.

jedoch direkt https://localhost:3000/home oder https://www.myapp.io/home im Browser eingeben, wird einen Fehler erhöhen (ich weiß nicht, wie vorherige <h1><%= message %></h1><h2><%= error.status %></h2><pre><%= error.stack %></pre> in error.ejs-error.html zu drehen, so habe mich nicht mehr Details).

So jetzt ist das Ziel, https://localhost:3000/home und https://www.myapp.io/home arbeiten zu lassen.

von this thread folgenden, habe ich die folgt 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 }); 
}); 

Und in Apache von Mac, hier ist mein httpd-vhosts.conf nach apache Neustart https://localhost:3000/home noch einen Fehler zurückgibt.

<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> 

In der Produktion ist hier der NGINX-Server-Block. Nach dem Neustart von NGINX gibt https://www.myapp.io/home immer noch einen Fehler zurück.

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

Könnte jemand helfen?

Answer 1

Wenn es nur um die #. Sie können es in Angular selbst entfernen.

Fügen Sie locationProvider einfach in Ihren App-Eintrag ein und setzen Sie htmlMode auf true. Setzen Sie in Ihrer index.html die baseUrl.

$locationProvider.html5Mode(true) 

Und Sie fügen index.html:

<base href="/" /> 

Das Ihre Urls ohne # generieren. Hilft das?

Answer 2

versuchen, dies in Ihrem ausdrücklichen Server

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

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

und in dem Winkel App:

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

und Sie müssen noch die <base href="/"> in Ihrem index.html

lassen Sie mich wissen, ob dies funktioniert für Sie

EDIT:

Ich habe gerade gefunden Ihre App in https://github.com/chengtie/mini-mean, sieht aus wie Ihre app.use Bestellung ist falsch. Bitte kopieren Sie dies in Ihren Express-Server und prüfen Sie, ob es jetzt in Ordnung ist. pastebin

Answer 3

Dies könnte nützlich stuff,

AngularJS routing without the hash '#'

Verwenden Sie auch diese Zeile in Ihrer ausdrücklichen Server-Datei. app.use(express.static(path.join(__dirname, 'client folder')));

dies wird Ihre Datei index.html in diesen Ansicht Ordner und lädt direkt findet es

Answer 4

1. Sie müssen Apache oder Nginx nicht NodeJS in Entwicklung laufen, nur node server.js ist genug
2. Express gab Ihnen diesen Fehler, weil Sie eine veraltete API res.sendfile verwenden Sie bitte res.sendfile (Kapital F)
3. Einige Informationen für SPA tun:
   • Wenn Sie die ‚#‘ haben in der URL, der Browser interpretiert sie als lokale Referenz und somit keine neue Anforderung an den Server senden
   • von $locationProvider.html5Mode(true) ermöglichen Sie jetzt html5 Push-Zustand mit um Ihre Anwendung Geschichte zu navigieren und (wenn ich mich nicht irren Sie passieren zu verwenden), um die ‚#‘ in url
   • Ohne die ‚# Winkel effektiv entfernen '(hash-bang) browser interpretiert es als neue Anfrage und sendet es an den Server, so dass Sie alle Anfragen vom Server zu Ihrer SPA-Eintragsdatei
   zuordnen müssen
   • Zur genauen Schritte, dieses Verhalten zu replizieren, wenden Sie diesen Artikel: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag (die Basis href in Ihrem Eintrag Datei ist wichtig)