Spring boot - Why do I get error 401 when I try to access a static image stored on the server?

Question

I am working on a project with Angular (frontend) and Spring Boot (backend).

In my system, there are activities. Each of these activities has an associated image. In my database, I have stored the name of the image with more information. Here I show how the database is configured:

Then, I stored pictures in a separate directory in the server.

I have stored an image in the next path: "resources/static/images/"

Moreover, I have added this code.

@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/");
        }
    }
}

If I try to access from postman, everything is fine.

The problem is when I try to access from Angular to that url. I have the next code in Angular:

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

And when I launch the application in the browser, I get the following error:

My questions are:

• Why do I get this error?
• I have not created a request to obtain only images. Maybe, is it necessary to add a new request in the ActivityController for this objective?
• I have read this question but most answers remove Spring Security and I don't want that

This is how I set up 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);
    }

The application properties are the following:

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

I have also tried to do the following. I created a service in angular

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

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

But this is the problem:

• Angular Version: 10
• Spring boot Version: 2.3.5.RELEASE

Answer 1

1.you are facing a cross-origin problem so create cross origin config class in your project. this code working for my project.

@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);
    }
}