Spring + thymeleaf - strona nie ładuje pliku css

pytanie zadane 26 stycznia 2019 w Java przez niezalogowany

Hej.

W projekcie Spring używam standardowych rzeczy: Data, Security, Thymeleaf.

Dodałem niedawno nową podstronę html i po przejściu na nią w uruchomionej aplikacji dev tools w chrome pokazuje to:

"Refused to apply style from 'http://localhost:8080/seeDetails/details.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

Pliki są w folderze resources/static

Nie rozumiem tego, bo wszystkie inne podstrony działają. W configu Spring Security ustawiłem coś takiego:

@Override
	protected void configure(HttpSecurity http) throws Exception{
		http
		.sessionManagement()
        	.sessionCreationPolicy(SessionCreationPolicy.ALWAYS)
        	.and()
		.authorizeRequests()
		    .antMatchers("/addAnimal").authenticated()
			.anyRequest().permitAll()
			.and()
		.formLogin()
			.loginPage("/login")
			.permitAll()
			.and()
		.logout()
			.permitAll();
	}

żeby nie blokowało zasobów, ale na nic się to zdało :/

1 odpowiedź

odpowiedź 26 stycznia 2019 przez mbabane Szeryf (79,280 p.)
wybrane 15 maja 2019

Najlepsza

Wydaje mi się, że to nie security, a brak ustawien mapowan na statyczne zasoby. Sprawdź to:

https://memorynotfound.com/adding-static-resources-css-javascript-images-thymeleaf/

komentarz 26 stycznia 2019 przez mbabane Szeryf (79,280 p.)
edycja 26 stycznia 2019 przez mbabane

A moment bo piszesz, że reszta działa. Czy po wyłączeniu security też nie działa?

Sprawdz jeszcze to:

https://stackoverflow.com/questions/25368535/spring-security-does-not-allow-css-or-js-resources-to-be-loaded

komentarz 27 stycznia 2019 przez niezalogowany

Po wyłączeniu spring security również nie działa :/

komentarz 27 stycznia 2019 przez mbabane Szeryf (79,280 p.)

Sprawdz czy w css nie ma jakiegoś błędu skladniowego

komentarz 27 stycznia 2019 przez niezalogowany
edycja 27 stycznia 2019

.thumbnail {
  padding: 70px 0 15px 0;
  border: none;
  border-radius: 0;
}

.thumbnail p {
  margin-top: 15px;
  color: #555;
}

/* Black buttons with extra padding and without rounded borders */
.btn {
  padding: 10px 20px;
  background-color: #333;
  color: #f1f1f1;
  border-radius: 0;
  transition: .2s;
}

/* On hover, the color of .btn will transition to white with black text */
.btn:hover,
.btn:focus {
  border: 1px solid #333;
  background-color: #fff;
  color: #000;
}

/* Showing details of each selected animal */
.animal-cont {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  width: 500px;
  border: solid 2px red;
}

.animal-cont img {
  width: 100%;
}

.animal-cont .thumbnail {
  width: 70%;
  margin: auto;
  padding: 10px 0;
}

.animal-cont .description {
  text-align: center;
}

.animal-cont .description h3 {
  left: 50%;
}

.animal-cont .description p {
  font-size: 16px;
  padding: 5px 10px;
}

Nie ma błędu składniowego :/ Jeśli podepnę ten plic css to innej podstrony, to działa na tej innej podstronie Oo

Swoją drogą błąd mówi: "Refused to apply style from 'http://localhost:8080/seeDetails/details.css' "
lecz plik css znajduje się pod adresem http://localhost:8080/details.css.

Ma to jakiś związek?

komentarz 28 stycznia 2019 przez mbabane Szeryf (79,280 p.)

To może masz jakiś błąd w ścieżce w pliku widoku, pokaż go. Możesz pokazać też pliki configów i controller do tego widoku.

Pokaż też rozkład plików w static (drzewo katalogów).

komentarz 28 stycznia 2019 przez niezalogowany


@Controller
public class AnimalsDetails {

	FindingAnimalById findingAnimalById;
	
	@Autowired
	public AnimalsDetails(FindingAnimalById findingAnimalById) {
		this.findingAnimalById = findingAnimalById;
	}


	@RequestMapping("/seeDetails/animal")
	public String seeDetailsAnimal(@RequestParam("id") int animalId, Model model) {
		model.addAttribute("animal", findingAnimalById.findAnimalById(animalId));
		return "detailSite";
	}
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <title>Szczegóły</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="details.css">
  <link rel="stylesheet" href="navbar.css">
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#myPage">Hotel pod psem</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#" th:href="@{/}">Strona główna</a></li>
          <li><a href="#" onclick="goBack()">Wróć</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Wybór
                  <span class="caret"></span>
                </a>
            <ul class="dropdown-menu">
              <li><a href="#" th:href="@{/showAllCats}">Koty</a></li>
            </ul>
          </li>
          <li><a href="#" th:href="@{/addAnimal}"><span class="glyphicon glyphicon-plus"></span></a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="animal-cont" th:object="${animal}">
    <img src="paris.jpg" alt="Paris">
    <div class="thumbnail">
      <h1>Imię psa: </h1><strong th:text="${animal.nameString}"></strong>
      <h2>Wiek psa:</h2>
      <p th:text="${animal.age}"></p>
    </div>
    <div class="description">
      <h3>Opis:</h3><br>
      <p th:text="${animal.animalsDescription}"></p>
    </div>
  </div>
  <script>
    function goBack() {
      window.history.back();
    }
  </script>
</body>

</html>

komentarz 28 stycznia 2019 przez mbabane Szeryf (79,280 p.)

Spróbuj tak:

<link rel="stylesheet" href="/details.css">

Lub zgodnie z thymeleaf:

<link rel="stylesheet" type="text/css" th:href="@{/details.css}"/>

komentarz 28 stycznia 2019 przez niezalogowany

Dzięki, działa :)

Podobne pytania

0 głosów

1 odpowiedź 420 wizyt

Spring + thymeleaf - problem z importowaniem pliku css

pytanie zadane 19 lutego 2019 w Java przez anonymousProgrammer Początkujący (350 p.)

0 głosów

3 odpowiedzi 1,192 wizyt

Spring boot Thymeleaf i style css

pytanie zadane 28 lutego 2018 w Java przez Tomek Reda Obywatel (1,110 p.)

+1 głos

1 odpowiedź 382 wizyt

Java, Spring, odniesienie się do zmiennej w pliku HTML przez Thymeleaf

pytanie zadane 15 stycznia 2018 w Java przez niezalogowany

Spring + thymeleaf - strona nie ładuje pliku css

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci