2016-08-03 17 views
3

Ich habe einfach Express-Server, der so aussieht:Express.js, unerwartetes Token <

Epxress Anwendung:

var express = require('express'); 
var compression = require('compression'); 
var path = require('path'); 
var cors = require('cors'); 
var router = express.Router(); 

var app = express(); 

app.use('/bundle', express.static(path.join(__dirname, '/bundle'))); 

app.enable('trust proxy'); 

app.use(compression()); 

app.get('*', function(req, res) { 
    res.header('Cache-Control', "max-age=60, must-revalidate, private"); 
    res.sendFile(path.join(__dirname, 'index.html')); 
}); 


var server = app.listen(process.env.PORT || 5000, function() { 
    var host = server.address().address; 
    var port = server.address().port; 
    console.log(`Example app listening at http://%s:%s`, host, port); 
}); 

Und einfache html-Datei:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>React Router test</title> 
</head> 
<body> 
    <div id="root"></div> 
    <script src="bundle.js"></script> 
</body> 
</html> 

Innerhalb von bundle.js habe ich ReactJS Anwendung mit client-seitigem Routing:

render((
    <Router history={browserHistory}> 
     <Route path="/" component={App}> 
      <Route path="about" component={About} /> 
      <Route path="about2" component={About2} /> 
      <Route path="about3" component={About3} /> 
      <Route path="*" component={NoMatch} /> 
     </Route> 
     <Route path="*" component={NoMatch} /> 
    </Router> 
), document.getElementById('root')); 

Jedes Mal, wenn ich versuche zu Domain zu navigieren: port/ (diese Route unterstützt wird durch den Router) everething OK ist. Aber wenn ich versuche, um komplexere URL, wie Domäne zu navigieren: port /// .. usw. Ich habe einen Fehler im Browser:

bundle.js:1 Uncaught SyntaxError: Unexpected token < 

looke wie anstelle bundle.js von statischer Server-Antwort von senden Mit index.html und inside bundle.js gibt es HTML Markup.

Wie kann ich das beheben?

Danke!

+1

try

+0

@Utro funktioniert für mich. Vielen Dank! –

+0

@KokovinVladislav danke, es funktioniert in meinem Fall –

Antwort

6

Es scheint eine Loopback auftritt zu sein, da die * Regel eine index.html jedes Mal dient, und wenn bundle.js nicht gefunden wird, wird es index.html stattdessen dienen, so versucht < als Javascript zu analysieren.

Eine Art Index-nehmung wenn man will ...

1

Schritt 1

Struktur Folder:

public 

    -> index.html 

    -> bundle.js 

Schritt 2

konfigurieren statischen Pfad so

app.use(express.static('public')) 

Schritt 3

Stellen Sie sicher, ob er richtig .GO zu Browser konfiguriert ist und Zugriff auf Ihre js Datei direkt wie

localhost:3000/bundle.js 

Wenn Sie Ihr Javascript sehen ... Hurrray.Wenn nicht, dann mit Schritt kämpft 2 dann überprüfen Schritt 3

Schritt 4

Verwendung gleichen Weg in Script-Tag in ui wie

<script src="/bundle.js" type="text/javascript"></script> 
Verwandte Themen