Angular4 CORS 标头包含多个值

Posted 2023-03-04

【中文标题】Angular4 CORS 标头包含多个值

【英文标题】：Angular4 CORS header contains multiple values

【发布时间】：2018-04-04 13:45:12

【问题描述】：

请有人帮忙解决问题： 后端弹簧应用 web.xml

 <filter>
        <filter-name>corsFilter</filter-name>
        <filter-class>package.controllers.auth.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>corsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

过滤器

public class CorsFilter implements Filter 
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException 
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "*,*");
        httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization,Access-Control-Allow-Origin");
        httpResponse.setHeader("Access-Control-Expose-Headers", "Access-Control-Allow-Credentials");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Access-Control-Max-Age", "10");
        System.out.println("---CORS Configuration Completed---");
        chain.doFilter(request, response);
    

角度前端：

let headers = new Headers( 'Content-Type': 'application/json' );
    let options = new RequestOptions( headers: headers );
    return this.http.post(AppSettings.API_ENDPOINT + '/url', JSON.stringify(user), options)
      .map(response => response.json())      
  

浏览器返回问题：

对预检请求的响应未通过访问控制检查： 'Access-Control-Allow-Origin' 标头包含多个值

【问题讨论】：

更改此：httpResponse.setHeader("Access-Control-Allow-Origin", "*,*") ...仅此：httpResponse.setHeader("Access-Control-Allow-Origin", "*") 浏览器要求 Access-Control-Allow-Origin 值是单个 * 通配符（表示允许任何来源）或单个起源;例如，Access-Control-Allow-Origin: https://foo.com.

【参考方案1】：

我也面临同样的问题。根本原因是 cors 标头多次运行。我注释掉了

httpResponse.setHeader("Access-Control-Allow-Origin", "*");"

行。

我只有一个安全配置类，如下所示。这堂课，解决了我的cors问题。

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter 

    @Override
    protected void configure(HttpSecurity http) throws Exception 

        http
            // your security config here
            .authorizeRequests()
            .antMatchers(HttpMethod.TRACE, "/**").denyAll()
            .antMatchers("/admin/**").authenticated()
            .anyRequest().permitAll()
            .and().httpBasic()
            .and().headers().frameOptions().disable()
            .and().csrf().disable()
            .headers()
            // the headers you want here. This solved all my CORS problems! 
           /* .addHeaderWriter(new StaticHeadersWriter("Access-Control-Allow-Origin", "*"))*/
            .addHeaderWriter(new StaticHeadersWriter("Access-Control-Allow-Methods", "POST, GET"))
            .addHeaderWriter(new StaticHeadersWriter("Access-Control-Max-Age", "3600"))
            .addHeaderWriter(new StaticHeadersWriter("Access-Control-Allow-Credentials", "true"))
            .addHeaderWriter(new StaticHeadersWriter("Access-Control-Allow-Headers", "Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization"));
    

就我而言，我只是在做 POC，并从 Angular 应用程序调用 Rest 资源。我在 CORS 中面临唯一的问题。 仅解决 cors 问题，以下代码也足够了。

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter 

    @Override
    protected void configure(HttpSecurity http) throws Exception