浏览器下载不同目录下的js文件

Question

我正在构建一个在后端使用 Go 并在前端使用 React 的应用程序。我要先说明我的问题：

问题

我在浏览器上请求了一个 URL http://localhost:3000/story/5fdeb38eebbe1593ce53a512 （客户端路由）我希望我所有的 js 文件都下载到 js 文件夹而不是 story/js，如下面的屏幕截图所示。

在后端，我可以看到前端正在从 /story/js/* URL 请求文件，而它应该请求 /js/*

[GIN] 2021/07/26 - 21:55:59 | 304 | 14.378108182s |       127.0.0.1 | GET      "/story/js/bundle.js.map"
[GIN] 2021/07/26 - 21:55:59 | 200 | 17.669951527s |       127.0.0.1 | GET      "/story/js/main.chunk.js"
[GIN] 2021/07/26 - 21:56:00 | 200 | 29.195773528s |       127.0.0.1 | GET      "/story/js/0.chunk.js"
[GIN] 2021/07/26 - 21:56:00 | 308 |      68.265µs |       127.0.0.1 | GET      "/sockjs-node"
[GIN] 2021/07/26 - 21:56:00 | 304 |     134.182µs |       127.0.0.1 | GET      "/story/js/0.chunk.js.map"
[GIN] 2021/07/26 - 21:56:00 | 304 |     148.597µs |       127.0.0.1 | GET      "/story/js/main.chunk.js.map"

我的设置：

我首先将我的 React 文件编译到本地目录，然后让 Go 后端为静态文件提供服务。但我使用 gin 作为我的网络框架，它不支持静态文件服务的动态 URL。例如：对于有问题的 URL：http://localhost:3000/story/。所以我在后端做了一些黑客攻击，将那些动态 URL 映射到静态 URL.

我的推理

我可以看到我的 React index.html 具有以下内容：

<script src="js/bundle.js"></script><script src="js/0.chunk.js"></script><script src="js/main.chunk.js"></script></body>

所以我怀疑 index.html 是不是首先被下载到浏览器中的 story/ 目录中。要问的问题是：是什么导致浏览器将 index.html 文件保存到不同的目录？如果有人知道答案，我将不胜感激！

Answer 1

我最终想通了我将文件下载到那个奇怪文件夹的原因： URL 我有 http://localhost:3000/story/5fdeb38eebbe1593ce53a512 是客户端路由。因此，当我在浏览器中请求 URL 时，它会在我的目录中查找文件 story/5fdeb38eebbe1593ce53a512。

这是同样的问题 React - Serving Apps with Client-Side Routing

我的后端以 http://localhost:3000/story/5fdeb38eebbe1593ce53a512 的 return 文件的方式处理它，最终显示的是 index.html 文件被保存为 story/5fdeb38eebbe1593ce53a512

我用Chrome来显示文件结构，这样显示更直观：请求http://localhost:3000/story/5fdeb38eebbe1593ce53a512，看到文件story/5fdeb38eebbe1593ce53a512其实是我的index.html

请求http://localhost:3000

解决方案 我在上面发布的 React link 解决方案使用 Apache HTTP Server 或 Tomcat 将某些 URL 映射到静态文件目录。

浏览器下载不同目录下的js文件

Browser download js file in a different directory

javascript

browser

frontend