Express.js，意外的令牌 <
Posted
技术标签:
【中文标题】Express.js，意外的令牌 <【英文标题】：Express.js, Unexpected token < 【发布时间】：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 谢谢，它适用于我的情况 【参考方案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链接坏了:(以上是关于Express.js，意外的令牌 <的主要内容，如果未能解决你的问题，请参考以下文章
Express.js csrf 令牌与 jQuery Ajax