当标头包含带有请求的“ withCredentials”时，响应中的错误“ Access-Control-Allow-Origin”标头不得为通配符“ *”

Question

我正在将来自angular的请求发送到标头withCredentials为true的服务器，并且在服务器端，我只允许来自运行我的angular的源http://0.0.0.0:4200的请求。由于我的请求包含授权标头，因此它发送预检请求，但失败并显示以下错误消息。

但是，如果您查看我对预检请求的响应，则标题“ 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类

@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

尝试在“ Access-Control-Allow-Origin”设置附近的服务器端添加此内容：

"Access-Control-Allow-Credentials: true"

Answer 2

问题是您的服务器上未启用CORS。

  

跨源资源共享（CORS）是一种机制，该机制使用其他HTTP标头来告诉浏览器，使运行在一个来源（域）上的Web应用程序有权访问来自另一个来源的服务器中的选定资源。当Web应用程序请求其来源（域，协议和端口）与其来源不同的资源时，它将发出跨域HTTP请求。

因此，每当javascript代码要将请求发送到另一个来源时，它只能通过允许的来源资源进行。此资源在服务器的响应标头中提供。

因此，如果服务器不允许来自其作用域之外的来源的任何请求，则所有请求都将失败。因为浏览器不允许它发生。

因此，请在服务器端启用CORS，以便angular可以在服务器范围之外与之交互。