Question

甚至不确定如何表达这个问题。

基本上我有一个React应用程序，我使用React-Router进行路由处理，节点服务器在每个请求上发回index.html文件并处理静态资产，因为我使用React Router＆＃39;历史位置配置。将每个请求记录到该服务器，我可以看到转到基本URL发送3个请求，一切正常：

GET / 200 3.795 ms - - GET /static/app.css 200 2.234 ms - - GET /build/bundle.js 200 0.608 ms - -

对于任何常规的浅路线（例如/a）也是如此。但是，只要我尝试访问嵌套路由（例如/a/b），一切都会中断。更具体地说，在窗口中，我得到Uncaught SyntaxError: Unexpected token <的语法错误，在我的节点服务器的日志中，我得到了这些请求：

GET /a/b 304 2.286 ms - -
GET /a/static/app.css 304 1.061 ms - -
GET /a/build/bundle.js 304 1.004 ms - -

所以看起来这里的行为是每次我发送一个页面视图请求时，它会发送一个给定嵌套路由的请求，对于任何其他静态资产，它只是弹出嵌套路由并附加该路由静态资产是指该路线的其他任何部分。例如，如果我转到/a/b/c，我会看到类似GET /a/b/static/app.css的内容。

这是我的节点服务器设置：

import express from 'express';
import morgan from 'morgan';
import path from 'path';

const app = express();

const STATIC_PATH = path.join(__dirname, '/../dist');

app.use(morgan('dev'));

app.use(express.static(STATIC_PATH));

app.get('*', (req, res) => {
  res.sendFile('index.html', { root: STATIC_PATH });
});

app.set('port', process.env.PORT || 8000);
app.server = app.listen(app.get('port'), () => {
  console.log('Listening on port %d', app.get('port'));
});

Answer 1

您的网页中可能包含静态资源网址，例如"static/app.css"，它是完全相对的网址。当您这样做时，浏览器会在与当前网页相同的路径上请求该文件名，并且它将根据当前网页的路径而有所不同。因此，如果您的网页为/a.html，则会请求/static/app.css。如果您的网页为/a/b.html，则会请求/a/static/app.css（这看起来就是您所看到的）。

您可能需要的是静态资源的域相对路径，该路径以前导/开头，看起来像"/static/app.css"。前导斜杠使其仅与域相关，而不是与网页的路径相关。无论您的网页路径是什么，浏览器都会发出相同的请求，因为该路径是相对于域名的顶部。

因此，总而言之，HTML文件已从此更改：

<link rel="stylesheet" href="static/app.css">

到此：

<link rel="stylesheet" href="/static/app.css">

嵌套路由请求被解释为CSS文件请求

1 个答案: