Spring boot—当我尝试访问存储在服务器上的静态映像时，为什么会出现错误401？

Question

我正在用Angular（前端）和Spring Boot（后端）做一个项目。

在我的系统中，有一些活动。每个活动都有一个关联的映像。在我的数据库中，我存储了包含更多信息的图像名称。在此，我将演示如何配置数据库：

然后，我将图片存储在服务器的一个单独目录中。

我在下一个路径中存储了一个图像：“资源/静态/图像/”

此外，我还添加了此代码。

@SpringBootApplication
public class AplicacionTurismoApplication {

    public static void main(String[] args) {
        SpringApplication.run(AplicacionTurismoApplication.class, args);
    }

    @Configuration
    public class WebConfig implements WebMvcConfigurer {
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/**")
                    .addResourceLocations("classpath:/static/");
        }
    }
}

问题是当我试图从Angular访问到该网址。我有下一个代码在Angular：

<td><img src="http://localhost:8090/images/museoferrocarril.jpg" /></td>

当我在浏览器中启动应用程序时，会出现以下错误：

我的问题是：

• 为什么会出现这个错误
• 我没有创建仅获取图像的请求。也许，是否有必要为此目标在ActivityController中添加新请求
• 我读过这个问题，但大多数答案都删除了Spring Security性，我不希望这样

以下是我如何设置spring security的：

 @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable()
                .authorizeRequests()
                .antMatchers("/api/auth/**", "/api/interest/list").permitAll()
                .anyRequest().authenticated().and()
                .formLogin().loginPage("/login").permitAll().defaultSuccessUrl("/recomendation").and()
                .exceptionHandling().authenticationEntryPoint(jwtEntryPoint)
                .and()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
        http.addFilterBefore(jwtTokenFilter(), UsernamePasswordAuthenticationFilter.class);
    }

应用程序属性如下所示：

server.port = 8090
spring.datasource.url = jdbc:mysql://localhost:3306/aplicacionTurismo?useSSL=false&serverTimezone=UTC&useLegacyDateTimeCode=false&allowPublicKeyRetrieval=true

spring.datasource.username = ''
spring.datasource.password = ''

spring.jpa.show-sql = true

spring.jpa.hibernate.ddl-auto = update

spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5Dialect

allowPublicKeyRetrieval=true

我还尝试了以下几点。我创建了一个角服务

  imagesURL = 'http://localhost:8090/images';

  getImages(namePhoto){
    return this.httpClient.get<any>(this.imagesURL + '/' + namePhoto);
  }

但问题在于：

• Angular版本：10
• Spring引导版本：2.3.5。发布

Answer 1

1.您正面临跨原点问题，因此请在项目中创建跨原点配置类。这段代码适用于我的项目。

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    HttpServletRequest request = (HttpServletRequest) req;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "*");

    if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
        response.setStatus(HttpServletResponse.SC_OK);
    } else {
        chain.doFilter(req, res);
    }
}