1

I have a project where the backend is written in Spring and the frontend in ReactJs. After hours of research, I've made the project run using maven resources plugin, Thymeleaf, and frontend maven plugin. It seems to be working fine when I run the spring boot application it runs on localhost 8080 and the react app is started as expected. The problem is the react app has no styling or any form of js and the only thing I can see is the title React app.

On inspecting I ran into the error Refused to apply style from 'http://localhost:8080/static/css/main.073c9b0a.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

this is my web security configurer class

    @Override
protected void configure(HttpSecurity http) throws Exception {
    http.csrf()
            .disable()
            .authorizeRequests()
            .antMatchers("/", "/css/**", "/js/**", "/images/**")
            .permitAll().anyRequest()
            .authenticated()
            .and()
            .httpBasic();

}

my pom.xml file

    <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.6.1</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.hospitalsystem</groupId>
<artifactId>Hs</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>Hs</name>
<description>Demo project for HospitalSystem</description>
<properties>
    <java.version>17</java.version>
    <frontend-src-dir>${project.basedir}/src/main/reactfrontend</frontend-src-dir>
    <node.version>v14.17.4</node.version>
    <npm.version>6.14.14</npm.version>
    <frontend-maven-plugin.version>1.10.3</frontend-maven-plugin.version>
</properties>
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-actuator</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <!--        H2database for in memory authentication-->
    <!--        <dependency>-->
    <!--            <groupId>com.h2database</groupId>-->
    <!--            <artifactId>h2</artifactId>-->
    <!--        </dependency>-->

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
                <excludes>
                    <exclude>
                        <groupId>org.projectlombok</groupId>
                        <artifactId>lombok</artifactId>
                    </exclude>
                </excludes>
            </configuration>
        </plugin>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>

            <configuration>
                <nodeVersion>${node.version}</nodeVersion>
                <npmVersion>${npm.version}</npmVersion>
            </configuration>

            <executions>
                <execution>
                    <id>install-frontend-tools</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <workingDirectory>${frontend-src-dir}</workingDirectory>
                    </configuration>
                </execution>

                <execution>
                    <id>npm-install-frontend-app</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <workingDirectory>${frontend-src-dir}</workingDirectory>
                        <arguments>install</arguments>
                    </configuration>
                </execution>

                <execution>
                    <id>build-frontend-app</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <workingDirectory>${frontend-src-dir}</workingDirectory>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>

        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <!--                <version>3.0.1</version>-->
            <executions>
                <execution>
                    <id>position-react-build</id>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <phase>prepare-package</phase>
                    <configuration>
                        <outputDirectory>${project.build.outputDirectory}/templates</outputDirectory>
                        <resources>
                            <resource>
                                <directory>${frontend-src-dir}/build</directory>
                                <filtering>false</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

.So how do I disable mime type or what is the work around with this.

Amos Machora
  • 486
  • 3
  • 12
  • look at this post https://stackoverflow.com/questions/24726218/spring-security-refused-to-execute-script-from – Srinivas Nangana Mar 07 '22 at 11:26
  • Please use browser dev-tools to check for any 404 errors for any resource. I had a similar problem years ago and it was related to a CSS that is not present. – Ahmet Mar 07 '22 at 13:18

0 Answers0