React Router：拒绝执行脚本或样式

Posted 2023-02-21

【中文标题】React Router：拒绝执行脚本或样式

【英文标题】：React Router: Refused to execute script or styles

【发布时间】：2018-12-15 07:01:47

【问题描述】：

当我浏览 http://localhost:8080/create 时，它工作正常，但浏览 http://localhost:8080/create/344 或 http://localhost:8080/edit/224 时出现此错误：

拒绝应用样式来自 'http://localhost:8080/edit/dist/main.css' 因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且严格的 MIME 检查已启用。

2345:12 GET http://localhost:8080/edit/dist/bundle.js 404（未找到） 345:1

拒绝执行脚本 'http://localhost:8080/editt/dist/bundle.js' 因为它的 MIME 类型 ('text/html') 不可执行，严格的 MIME 类型检查是 已启用。

这是我的代码：

<BrowserRouter>
    <Switch>
        <Route exact=true path="/" component=Dashboard />
        <Route path="/edit/:id" component=EditPost/>
        <Route path="/create" component=AddPost />
        <Route component=NotFoundPage/>
    </Switch>
</BrowserRouter>

请查看此截图：

这是我的 webpack 配置文件：https://pastebin.com/d5vx8niQ 项目文件：https://drive.google.com/file/d/1IYcuJTbklXYi53XvIcNRJtb-tLOO4g1j/view?usp=sharing

【问题讨论】：

我尝试了两天，但我找不到任何解决方案:(这是我的文件，你可以查看send.firefox.com/download/91cc3b75a1/#lPUaHFNmniQYtl6zyc-s7g

当我运行 webpack 开发服务器并导航到一个不存在的页面时，我在浏览器控制台中收到 404，并且许多 css 和 js 文件触发了相同的 MIME 类型错误。它们会触发该错误，因为如果您直接访问这些资产的链接，您将看到由 webpack 生成的 404 页面，它是 HTML，而不是您的应用所期望的 CSS 或 JS。这是一个拼写错误，但从 webpack 向你抛出的内容来看，这并不是很明显

【参考方案1】：

只需在您的 HTML 中使用/dist/main.css 和/dist/bundle.js 而不是dist/main.css 和dist/bundle.js。

【参考方案2】：

在链接所有 css 文件之前，在 index.html 头中添加 <base href="/">。 （来源：https://github.com/froala/angular-froala/issues/170）