代码之家  ›  专栏  ›  技术社区  ›  Nawnit Sen

错误:响应中的“Access-Control Allow-Origin”标头不能是通配符“*”,因为标头包含请求的“withCredentials”

  •  0
  • Nawnit Sen  · 技术社区  · 6 年前

    我正在从angular向我的服务器发送一个带有标题的请求 withCredentials 作为 true http://0.0.0.0:4200 我的角跑。因为我的请求包含它发送的authorization头 飞行前请求 Error message

    请求头的值中没有通配符 “访问控制允许原点” .

    Preflight response headers

    角度法:

    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 => {..}
    

    服务器端代码:-

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

    @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;
        }
    
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   JoeYoung_22222    5 年前

    "Access-Control-Allow-Credentials: true"
    
        2
  •  0
  •   Reza Torkaman Ahmadi    6 年前

    CORS 未在您的服务器上启用。

    Cross-Origin Resource Sharing(CORS)是一种机制,它使用额外的HTTP报头告诉浏览器,让运行在一个源(域)的web应用程序有权从另一个源服务器访问选定的资源。当web应用程序请求的资源的来源(域、协议和端口)与其自身的来源不同时,web应用程序会发出跨源HTTP请求。

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

    CORS公司 在服务器端,这样angular可以在服务器范围之外与它交互。

    推荐文章