SpringBoot+ThymeleafのアプリでCSSが読み込めない


サーバーサイドの勉強のためにSpringBootで簡単なTodoアプリを作ってるのですが、CSSが全然ロードしてくれなくて結構な沼にハマったのでメモ。

パスの問題?

まず疑ったのがパスの指定の仕方。あるあるですからね。
いろんなパスの指定の仕方を試しました。それでもうまく行きません。

src/main/resources
├── application.properties
├── dump.sql
├── static
│   ├── css
│   │   └── style.css
│   └── js
└── templates
    ├── category
    │   └── list.html
    └── todo
        └── list.html

../../static/css/style.cssってやってみたり、css/style.cssってやってみたり・・

ステータスコード400

ここで注目すべきなのが、コードが400であるということ。
一番上の画像を見てください。404 NOT FOUNDじゃないんです!
つまりパスが間違っているわけではない。これに気づくのにめっちゃ時間かかりました。
Abortedってなんや・・イミフ・・

ブラウザの問題かもしれない

そう思ってFirefoxでも試してみました。(もとはChrome)
まあもちろんそんなはずはなく。

あれ、なんかChromeより長い・・?


なぜかFirefoxさんはご親切にJava側のエラー内容まで教えてくれました。

Failed to convert String to int....?

"css/style.css"部分をint型として処理しようとしている・・?なんで・・・?
ここでようやくハッと気づいたのですが、実はコントローラーでこんなものを作っていました。

@Controller
@RequestMapping("/{category_id}")
public class TodoController {

このパス変数category_idはint型なので、どうやらベースURLの直後に入ってきたものをなんでもintとしてコントローラーが処理しようとしちゃっててエラーになっていたようです。

というわけでコントローラーのパスを/categories/{category_id}に変更したら、無事CSSがロードしてくれました。

ありがとうFirefox。
(Spring側のログに普通にエラー内容書いてあった。)