情景描述
- 前端使用
create react app
进行开发,并且使用指令npm run build
将所有的页面打包存放在build 目录 - 将build目录移动到spring boot(启动在8080)的
/src/main/resources/static
文件夹下
build目录
index.html
static
- css
- main.1537b9bf.css
- js
- index.html中<link href="/static/css/main.1537b9bf.css">
- 使用zuul(启动在8888)做代理。当你请求
/todos
就会将请求转发到localhost:8080
- 此时访问
localhost:8888/todos/index.html
- 发现控制台报错:localhost:8888/static/css/main.1537b9bf.css not found.
矛盾点
- 请求css文件的url少了前缀todos,那么问题在于-->什么时候由谁发出的css请求?请求路径又是如何确定和修改的呢?
问题
Q1:spring boot是如何进行静态资源处理的呢?是不是和express的static方式一致呢?
-
A1:spring boot进行了自动的WebMvcAutoConfiguration配置,因此当你在浏览器发送GET请求,spring boot会自动的去几个确定的目录下寻找静态资源,并将资源返回。
- 当你请求
/index.html
他会自动的依次去- classpath:/META-INF/resources/
- classpath:/resources/
- classpath:/META-INF/resources/
- classpath:/static/
这些目录写寻找
index.html
文件。
这种方式和express.static一致,同时两者都可以手动设置静态资源的存放的根目录。- example
- 请求http://localhost:port/todos/css/index.css
- 这时候就有在可能拿到root/src/main/resources/static/todos/css/index.css文件
- 当你请求
Q2:是谁发送的获取css文件的请求呢?
A2:打开你的请求的index.html文件,页面需要加载,这个过程中发现了例如
href、src
等元素属性,需要其他的文件资源,这时候就会发送请求去请求这些资源。Q3:请求css文件的url是如何确定的呢?
A3:可以这样理解,既然是寻找文件,那么这个url就是文件的路径。
http://localhost:port
就是文件系统的根目录。对应着当前的静态文件根目录。而请求css的路径,就是根据你所设置的文件路径(href或者src的值),获得正确的url路径进行请求然后到对应的服务器静态文件夹寻找。Q4:那么是什么导致请求css的url中的/todos丢失?
A4:因为元素的src或者href属性的值是一个绝对路径以
/
开头。此时浏览器会认为根目录的位置对应http://localhost:port
,然后加上src或者href的值,而这里的根目录就是http://locahost:port
自然请求url变成了localhost:8888/static/css/main.1537b9bf.cssQ5:如何让请求的url改变,不舍去todos呢?
A5:当前我们的路径在http://localhost:port/todos下面我们只需
cd ./static/css/main.1537b9bf.css
即可拿到相应的文件,因此我们可以设置src的值直接为./static/css/main.1537b9bf.css
不使用绝对路径,将路径导向根,就可以在当前的url下以相对路径寻找文件
反思
- 其实我对这种服务器提供静态资源的方式在express的时候就接触过,因为会用,所以也没有看和研究。改变思想:会用不等于会。其实这个问题我研究的不是很清楚,还是很表象。今晚我会继续看
ACTION
- 自己使用的东西,一定要弄清楚原理,为什么。还是一样只要出bug,和在网上的找到使用的东西必须要记录笔记。每天至少研究三种不了解的知识内容