什么是 mime 类型以及如何通过 React 从 Springboot 禁用它?

发布于 2025-01-12 14:35:16 字数 7868 浏览 0 评论 0原文

我有一个项目,后端是用 Spring 编写的,前端是用 ReactJs 编写的。经过几个小时的研究,我已经使用ma​​ven资源插件Thymeleaf前端maven插件运行了该项目。当我运行在 localhost 8080 上运行的 Spring Boot 应用程序时,它似乎工作正常,并且 React 应用程序按预期启动。问题是 React 应用程序没有样式或任何形式的 js,我唯一能看到的就是标题 React 应用程序。

在检查时,我遇到了错误 Refused to apply style from 'http://localhost:8080/static/css/main.073c9b0a.css',因为它的 MIME 类型('application/json')不是受支持的样式表MIME 类型,并且启用了严格的 MIME 检查。

这是我的 web 安全配置器类,

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

}

我的 pom.xml 文件

    <?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>

。那么我如何禁用 mime 类型或者解决这个问题的方法是什么。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文