2016-08-03 2 views
3

У меня есть простой экспресс-сервер, который выглядит так:Express.js, Неожиданный токен <

Epxress Применение:

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

И простой HTML файл:

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

Внутри bundle.js у меня есть приложение ReactJS с клиентской стороны:

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

Всякий раз, когда я пытаюсь перейти к домена: порт/ (этот маршрут поддерживается маршрутизатором) everething ОК. Но когда я пытаюсь перейти к более сложной URL, как домена: порт /// .. и т.д. я получил сообщение об ошибке в браузере:

bundle.js:1 Uncaught SyntaxError: Unexpected token < 

lõoke как вместо того, чтобы отправить bundle.js от статического ответа сервера с index.html и внутри bundle.js есть html разметка.

Как я могу это исправить?

Спасибо!

+1

попробовать <сценарий SRC = "/ расслоение .js "> –

+0

@Utro работает для меня. благодаря! –

+0

@KokovinVladislav благодарит, он работает в моем случае –

ответ

6

Там, кажется, петлевой происходящий, так как * правило отбывает index.html каждый раз, и когда bundle.js не найден, он будет служить index.html вместо этого, таким образом, пытаясь разобрать < как JavaScript.

Этакий индекс-ception если вы ...

1

Шаг 1

структура папок:

public 

    -> index.html 

    -> bundle.js 

Шаг 2

Настройка статический путь, как этого

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

Шаг 3

Убедитесь, что, если он правильно настроен .go в браузер и получить доступ к файлу JS непосредственно как

localhost:3000/bundle.js 

Если вы видите ваш javascript ... Hurrray.Если нет, то бороться с шагом 2, затем проверьте шаг 3

Шаг 4

использовать тот же путь в тег сценария в пользовательском интерфейсе, как

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