error: Refused to apply style from ... because its MIME type ('text/html') is not a supported stylesheet MIME type

126 Views Asked by Daniele Novelli At 20 October 2024 at 05:46

i'm a Junior Developer. i'm doing a password-manager, i'm using Spring Boot 3.x with Thymeleaf and Spring Security, i'm using Gradle as dependencyManager. My problem is with css, the html page cannot load the css file and a console error is shown: Refused to execute script from 'http://localhost:8080/password-manager/login-page' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Build.gradle

plugins {
    id 'java'
    id 'org.springframework.boot' version '3.1.4'
    id 'io.spring.dependency-management' version '1.1.3'
}

group = 'com.daniele'
version = '0.0.1-SNAPSHOT'

java {
    sourceCompatibility = '17'
}

configurations {
    compileOnly {
        extendsFrom annotationProcessor
    }
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-actuator'
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.2.0'
    implementation 'org.springdoc:springdoc-openapi-starter-webflux-ui:2.1.0'
    implementation 'org.springframework.boot:spring-boot-starter-validation:3.1.4'
    implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'
    implementation 'org.mapstruct:mapstruct:1.5.5.Final'
    compileOnly 'org.projectlombok:lombok'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
    runtimeOnly 'com.mysql:mysql-connector-j'
    annotationProcessor 'org.projectlombok:lombok'
    annotationProcessor 'org.mapstruct:mapstruct-processor:1.5.5.Final'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testImplementation 'org.springframework.security:spring-security-test'
}

tasks.named('test') {
    useJUnitPlatform()
}

SecurityConfig.java

@Configuration
@EnableWebSecurity
@PropertySource("classpath:application.properties")
public class SecurityConfig {

    @Value("${password-manager-base-url}")
    String baseUrl;
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {
        httpSecurity.authorizeHttpRequests(configurer->
                configurer
                        .anyRequest().authenticated()
        )
                .formLogin(form ->
                        form
                                .loginPage(baseUrl+"/login-page")
                                .loginProcessingUrl(baseUrl+"/authenticateUser")
                                .permitAll()
                )
                .logout(LogoutConfigurer::permitAll
                );
        return httpSecurity.build();
    }
}

PageController.java

@Controller
public class PageController {
    @GetMapping("${password-manager-base-url}/login-page")
    public String login() {
        return "login-page";
    }

}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="../static/css/login-page.css">
</head>
<body>
<div class="form-container">
    <div class="form-login">
        <form action="#" th:action="@{${baseUrl}/authenticateUser}" method="POST">
            <h2>Login</h2>
            <div class="input-group">
                <i class="fa fa-user"></i>
                <input type="text" name="username" class="input-text" autocomplete="off" placeholder="User Name">
            </div>
            <div class="input-group">
                <i class="fa fa-unlock-alt"></i>
                <input type="password" name="password" class="input-text" autocomplete="off" placeholder="Password">
            </div>
            <div class="" id="login-button">
                <button>Submit</button>
            </div>
            <div class="footer">
                <a>Forgot Password ?</a>
                <a>Sign Up</a>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="../static/js/login-page.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>```

my css file path: src\main\resources\static\css\login-page.css

this is what the console says: enter image description here

Let me know if you need something else, i know my code could be wrong at some point or not complete.

Original Q&A

error: Refused to apply style from ... because its MIME type ('text/html') is not a supported stylesheet MIME type

There are 0 best solutions below

Related Questions in JAVA

Related Questions in CSS

Related Questions in SPRING-BOOT

Related Questions in SPRING-SECURITY

Related Questions in SPRING-THYMELEAF

Trending Questions

Popular # Hahtags

Popular Questions