Express.js，意外的令牌 <答案

【问题标题】：Express.js, Unexpected token <Express.js，意外的令牌 <
【发布时间】：2016-12-09 03:45:10
【问题描述】：

我有一个简单的快递服务器，看起来像这样：

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

每当我尝试导航到 domain:port/（路由器支持此路由）时，一切正常。但是当我尝试导航到更复杂的 URL 时，例如 domain:port///.. 等，我在浏览器中遇到错误：

bundle.js:1 Uncaught SyntaxError: Unexpected token <

看起来不像使用 index.html 从静态服务器响应发送 bundle.js 而在 bundle.js 内部有 html 标记。

我该如何解决这个问题？

谢谢！

【问题讨论】：

试试
@Utro 为我工作。谢谢！
@KokovinVladislav 谢谢，它适用于我的情况

标签： javascript node.js express reactjs react-router

【解决方案1】：

似乎发生了环回，因为* 规则每次都服务于index.html，而当未找到bundle.js 时，它将服务index.html，从而尝试解析<作为 javascript。

一种index-ception如果你愿意的话......

【讨论】：

【解决方案2】：

第 1 步

文件夹结构：

public

   -> index.html

   -> bundle.js

第 2 步

像这样配置静态路径

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

第 3 步

确保它是否配置正确。转到浏览器并直接访问您的js文件

localhost:3000/bundle.js

如果您看到您的 javascript ...Hurray。如果没有，则与第 2 步战斗，然后检查第 3 步

第 4 步

在脚本标签中使用相同的路径

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

【讨论】：

【解决方案3】：

我通过添加以下行解决了同样的问题：

app.use(express.static(path.join(__dirname, "public")));

【讨论】：

【解决方案4】：

简单地说从 index.html 的中删除 DOT，子路由就可以工作了！因为 express 总是会找到带有 * catch all route 的捆绑包

我的修复在。我的仓库，检查一下：https://github.com/nickjohngray/staticbackeditor

要了解为什么以及如何执行此操作，请继续阅读：

修复方法是在 webpack 输出脚本标签时告诉 webpack 将包的路径设为绝对路径（而非相对路径），以便在 webpack.config 中设置 publicPath '/' (root) 和文件名 'bundle .js' ，然后 HtmlWepackPlugin 将嵌入脚本标签，如

<script src="/bundle.js">

这就是我们想要的！

不是

<script src="./bundle.js">

这是我的 webpack.config 的 sn-p 以允许子路由

 entry: ['babel-polyfill', './src/client/index.tsx'],
    output: {
       path: path.join(__dirname, outputDirectory),
       filename: 'staticbackeditor.js',
       publicPath: '/'
    }

如果路径是相对的，这里是一个流程示例：like

<script src="./bundle.js">

错了！杀死“.”

环境

后端是 express server，bundle.js 和 index.html 文件在 public static dist 文件夹中

Express 为所有使用 * 的请求提供了一条包罗万象的路由，该路由为 index.html 文件提供服务，例如

app.use('*', (req, res) => {
   res.sendFile(path.resolve('dist', 'index.html'))
})

Index.html 文件有这个脚本标签（注意 . 使这个路径相对）

<script src="./bundle.js"></script>

步骤

用户请求页面/编辑路线
Express 回馈 index.html 文件
Web 浏览器读取此文件
浏览器找到脚本标签
浏览器请求获取路径为 ./bundle.js 的脚本
Express 在静态文件夹中查找此文件
没有找到，
所以它在触发捕获所有路由时再次返回 index.html
BANG 网络浏览器报错。

所以服务器返回 index.html 而不是 bundle.js 发生这种情况是因为 catch all 路由运行 sine express 没有找到 bundle.js 在文件夹中编辑。

正确的流动 现在！如果我们将 html 文件脚本的源代码更改为绝对路径，那么无论用户在哪个路径上，express 都会找到它

用户请求页面/编辑路线
Express 回馈 index.html 文件
Web 浏览器读取此文件
浏览器找到脚本标签
浏览器请求获取路径为 /bundle.js 的脚本
（注意上面的.不见了！）
Express 在静态文件夹中查找此文件
它找到了，
所以它返回 bundle.js 砰！子路线有效！

【讨论】：

github链接坏了:(