Help us understand the problem. What is going on with this article?

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

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

パスの問題?

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

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)
まあもちろんそんなはずはなく。
image.png

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

error.gif
なぜか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側のログに普通にエラー内容書いてあった。)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away