开发毕设遇到第四个问题----Not allowed to load local resource:xxxx

最新推荐文章于 2025-05-17 19:43:47 发布

原创最新推荐文章于 2025-05-17 19:43:47 发布

· 463 阅读

0 ·

版权

文章标签：

#java #个人开发

SpringBoot 专栏收录该内容

15 篇文章

订阅专栏

在SpringBoot+Thymeleaf的前后端分离项目中，由于浏览器安全策略，尝试从本地加载图片被阻止。为了解决这个问题，可以通过配置Spring MVC的拦截器和资源处理器来实现。在拦截器配置中，排除图片路径，允许访问，并在Thymeleaf模板中正确引用图片路径。确保图片路径与拦截器配置的路径匹配，以便前端能成功显示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题出现的原因：想要在前端访问本地的图片，结果被浏览器拒绝了，浏览器会认为这是一种不安全的方式，所以给拒绝访问了，

环境描述：springboot +thyemleaf前后端分离模式开发

我觉得将静态资源的路径引入 applocation配置文件里可以解决这个问题，但是那样改变了静态资源的路径，因为我当初的想法就是上传的图片不放入静态资源下，直接上传到本地目录下，所以才出现这个问题。

解决方案：

引入拦截器配置：

package com.config;

import com.incerceptor.LoginInterceptor;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
public class MvcConfig implements WebMvcConfigurer {
    /**
     * 通过@Bean注解，将我们定义的拦截器注册到Spring容器
     *
     * @return
     */
    @Bean
    public LoginInterceptor loginInterceptor() {
        return new LoginInterceptor();
    }

    /**
     * 可以将不需要拦截的路径 ，比如说静态资源的路径放行，将下面的路劲添加到拦截器的后缀即可
     */

    // 这里需要放行所有的静态资源
    String[] excludePathPatterns = {
            "/static/**",
            "file:C:/Users/ly/IdeaProjects/Tyust_face/img/photo/"
    };

    /**
     * 重写接口中的addInterceptors方法，添加自定义拦截器
     *
     * @param registry
     */

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
// 通过registry来注册拦截器，通过addPathPatterns来添加拦截路径
        registry.addInterceptor(this.loginInterceptor()).addPathPatterns("/admin/**")
                .addPathPatterns("/teacher/**").excludePathPatterns(excludePathPatterns);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/image/**").addResourceLocations("file:///C:/Users/ly/IdeaProjects/Tyust_face/");

    }
}

然后thyemleaf模板：

  <img th:src="@{'/image/'+${student.image}}" height="150px" width="100px">

这样就可以成功在前端访问到图片了。提一嘴，student image存放的是图片的相对路径，

也就是路径配置是file:///C:/Users/ly/IdeaProjects/Tyust_face/" + image的路径，写的时候要注意一下，我就是这里没注意才导致看了半天不知道哪里出错。

在eclipse里的话可以参考一下下边的文章：
https://blog.youkuaiyun.com/bwddd/article/details/81530446?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164889181516780271596308%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164889181516780271596308&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-3-81530446.142^v5pc_search_result_cache,157^v4control&utm_term=Not+allowed+to+load+local+resource%3A&spm=1018.2226.3001.4187