Заголовок ошибки «Access-Control-Allow-Origin» в ответе не должен быть подстановочным знаком «*», когда заголовок содержит «withCredentials» с запросом

Question

Я отправляю запрос от angular на мой сервер с заголовком withCredentials как true, а на стороне сервера я разрешил запрос только от источника http://0.0.0.0:4200, где работает мой angular. Так как мой запрос содержит заголовок authorizaion, он отправляет предварительный запрос , и он завершается неудачно с приведенным ниже сообщением об ошибке.

Но если вы посмотрите на мой ответ на запрос preflight , в значении заголовка нет подстановочного знака "Access-Control-Allow-Origin" .

Ответ перед полетом:

Метод в угловых:

const headers = new HttpHeaders(credentials ? {
      authorization : 'Basic ' + btoa(credentials.username + ':' + credentials.password)
  } : {});
  headers.set("Access-Control-Allow-Origin","http://localhost:4200")
  this.http.get('http://localhost:8080/user', {headers: headers , withCredentials: true }).subscribe(response => {..}

Может кто-нибудь объяснить, почему я получаю эту ошибку и как ее исправить?

Код стороны сервера: -

CORSfilter.java

public class CorsFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request,
                                    HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "authorization,withCredentials, content-type, xsrf-token, Cache-Control, Cookie");
        response.addHeader("Access-Control-Expose-Headers", "xsrf-token");
        response.addHeader("Access-Control-Allow-Credentials", "true");
        if ("OPTIONS".equals(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            filterChain.doFilter(request, response);
        }
    }
}

SpringSecurityConfig class

@EnableWebSecurity
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.addFilterBefore(new CorsFilter(), ChannelProcessingFilter.class);
        http
        .httpBasic()
      .and()
        .authorizeRequests()
          .antMatchers("/").permitAll()
          .anyRequest().authenticated().and().csrf()
          .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());;
    }
}

Класс контроллера

@RestController
@CrossOrigin
public class SecurityController {

    @GetMapping("/hi")
    public Response method() {
        return new Response("Hi this is resposne from hi");
    }

    @GetMapping("/hi2")
    public Response method2() {
        return new Response("Hi this is resposne from hi2");
    }

    @RequestMapping("/user")
    public Principal user(Principal user) {
        return user;
    }

}

Answer 1

Проблема в том, что CORS не включен на вашем сервере.

Cross-Origin Resource Sharing (CORS) - это механизм, который использует дополнительные заголовки HTTP, чтобы сообщить браузеру, что веб-приложение, работающее в одном источнике (домене), имеет разрешение на доступ к выбранным ресурсам с сервера в другом источнике. Веб-приложение отправляет HTTP-запрос с несколькими источниками, когда оно запрашивает ресурс, источник которого (домен, протокол и порт) отличается от своего собственного источника.

Таким образом, всякий раз, когда код javascript хочет отправить запрос другому источнику, он может быть только через разрешенные ресурсы источника. Эти ресурсы указаны в заголовке ответа сервера.

Так что, если сервер не разрешает какой-либо запрос от источников вне его области действия, все они будут терпеть неудачу. Потому что браузер не позволяет этому случиться.

Так что включите CORS на стороне вашего сервера, чтобы angular мог взаимодействовать с ним вне области сервера.