스프링 부트로 CORS 문제

포트 8443에서 실행되는 Spring Boot 애플리케이션과 포트 8080에서의 angular2 기반 프론트 엔드를 가지고 있습니다. Spring 서버에 요청을하기 위해 프론트 엔드가 필요하지만 CORS 오류가 왼쪽과 오른쪽으로 표시됩니다. 내 RestController 메서드에 @CrossOrigin 주석을 추가했으며 프로젝트에 CORSFilter를 추가하고 web.xml에 매핑했지만 Firefox 46.0a2에서는 여전히 콘솔에서이 오류가 발생합니다.

내 컨트롤러의 관련 부분 :

@CrossOrigin
@RequestMapping("/allequips")
List<String> allequips(Model model) {
    List<String> codes = equipmentRepository.findAllEquipments();
    return codes;
}

CORSFilter :

public class CORSFilter implements Filter{
     public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
            HttpServletResponse response = (HttpServletResponse) res;
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
            chain.doFilter(req, res);
        }
        public void init(FilterConfig filterConfig) {}
        public void destroy() {}
}

web.xml의 매핑 :

  <filter>
  <filter-name>cors</filter-name>
  <filter-class>config.CORSFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>cors</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

그리고 이것이 중요한지는 모르지만 http 요청을하는 Angular2 코드는 다음과 같습니다.

@Injectable()
export class EquipService {
    equips: Array<Equip>;

    constructor(public http: Http) {
        console.log('Equip service created.', http);
    }

    getEquips() {
        return this.http.get(WebServiceEndPoint+'allEquips')
        .map((responseData) => {
            return responseData.json();
        }).map((equips: Array<any>) => {
            let result: Array<Equip> = [];
            if(equips) {
                equips.forEach((equip) => {
                    result.push(new Equip(equip.code));
                });
            }
            return result;
        }).subscribe( res => this.equips = res);
    }
}

구성이 누락 되었습니까? 내 코드가 어떤 식 으로든 잘못 되었나요?

편집 : 나는 포기하고 이전 커밋에서 다시 시작했습니다. 그 후에 @ Cross-Origin 만 추가하면 충분했습니다.

해결법

1. ==============================

   1.첫 번째 접근법 : - 스프링 부트를 사용하는 경우 webmvcconfigurereAdapter를 확장하는 새 클래스를 만듭니다.

   첫 번째 접근법 : - 스프링 부트를 사용하는 경우 webmvcconfigurereAdapter를 확장하는 새 클래스를 만듭니다.

    @Configuration
    @ComponentScan
    @EnableWebMvc
   
    public class ApplicationConfig extends WebMvcConfigurerAdapter {
   
        @Override
      public void addCorsMappings(CorsRegistry registry) {
      // Can just allow `methods` that you need.
      registry.addMapping("/**").allowedMethods("PUT", "GET", "DELETE", "OPTIONS", "PATCH", "POST");
       }
   }
   

   두 번째 접근법 : - 또한 이것을 @springBootApplication 클래스에 추가 할 수 있습니다. 아니 xml 필요합니다. 원본, 헤더, 방법 등은 모두 사용자의 필요에 따라 구성 할 수 있습니다.

   @Bean
        public CorsFilter corsFilter() {
            final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            final CorsConfiguration config = new CorsConfiguration();
            config.setAllowCredentials(true);
            config.addAllowedOrigin("*"); // this allows all origin
            config.addAllowedHeader("*"); // this allows all headers
            config.addAllowedMethod("OPTIONS");
            config.addAllowedMethod("HEAD");
            config.addAllowedMethod("GET");
            config.addAllowedMethod("PUT");
            config.addAllowedMethod("POST");
            config.addAllowedMethod("DELETE");
            config.addAllowedMethod("PATCH");
            source.registerCorsConfiguration("/**", config);
            return new CorsFilter(source);
        }
   

2. ==============================

   2.나는 당신이 Content-Type을 허용 된 헤더에 추가해야한다고 확신한다.

   나는 당신이 Content-Type을 허용 된 헤더에 추가해야한다고 확신한다.

   response.setHeader("Access-Control-Allow-Headers", "x-requested-with x-uw-act-as");
   

3. ==============================

   3.여기 내 프로젝트에서 일하는 것이있다.

   여기 내 프로젝트에서 일하는 것이있다.

   @Component
   public class CrossOriginRequestFilter implements Filter {
   
       //Configurable origin for CORS - default: * (all)
       @Value("${app.http.filter.cors.origin:*}")
       private String originList;
   
       @Override
       public void init(FilterConfig filterConfig) throws ServletException {
       }
   
       @Override
       public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
           HttpServletRequest httpRequest = (HttpServletRequest)req;
           HttpServletResponse httpResponse = (HttpServletResponse) res;
   
           String origin = httpRequest.getHeader("Origin");
           if (origin == null) {
               //this is the case of mobile, where it sends null as Origin
               httpResponse.setHeader("Access-Control-Allow-Origin", "*");
           } else if (origin != null && originList.contains(origin)) {
               httpResponse.setHeader("Access-Control-Allow-Origin", origin);
           } else {
               httpResponse.setHeader("Access-Control-Allow-Origin", "https://yourdomain.com");
           }
           httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
           httpResponse.setHeader("Access-Control-Max-Age", "3600");
           httpResponse.setHeader("Access-Control-Allow-Headers", "Accept, Accept-CH, Accept-Charset, Accept-Datetime, Accept-Encoding, Accept-Ext, Accept-Features, Accept-Language, Accept-Params, Accept-Ranges, Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Expose-Headers, Access-Control-Max-Age, Access-Control-Request-Headers, Access-Control-Request-Method, Age, Allow, Alternates, Authentication-Info, Authorization, C-Ext, C-Man, C-Opt, C-PEP, C-PEP-Info, CONNECT, Cache-Control, Compliance, Connection, Content-Base, Content-Disposition, Content-Encoding, Content-ID, Content-Language, Content-Length, Content-Location, Content-MD5, Content-Range, Content-Script-Type, Content-Security-Policy, Content-Style-Type, Content-Transfer-Encoding, Content-Type, Content-Version, Cookie, Cost, DAV, DELETE, DNT, DPR, Date, Default-Style, Delta-Base, Depth, Derived-From, Destination, Differential-ID, Digest, ETag, Expect, Expires, Ext, From, GET, GetProfile, HEAD, HTTP-date, Host, IM, If, If-Match, If-Modified-Since, If-None-Match, If-Range, If-Unmodified-Since, Keep-Alive, Label, Last-Event-ID, Last-Modified, Link, Location, Lock-Token, MIME-Version, Man, Max-Forwards, Media-Range, Message-ID, Meter, Negotiate, Non-Compliance, OPTION, OPTIONS, OWS, Opt, Optional, Ordering-Type, Origin, Overwrite, P3P, PEP, PICS-Label, POST, PUT, Pep-Info, Permanent, Position, Pragma, ProfileObject, Protocol, Protocol-Query, Protocol-Request, Proxy-Authenticate, Proxy-Authentication-Info, Proxy-Authorization, Proxy-Features, Proxy-Instruction, Public, RWS, Range, Referer, Refresh, Resolution-Hint, Resolver-Location, Retry-After, Safe, Sec-Websocket-Extensions, Sec-Websocket-Key, Sec-Websocket-Origin, Sec-Websocket-Protocol, Sec-Websocket-Version, Security-Scheme, Server, Set-Cookie, Set-Cookie2, SetProfile, SoapAction, Status, Status-URI, Strict-Transport-Security, SubOK, Subst, Surrogate-Capability, Surrogate-Control, TCN, TE, TRACE, Timeout, Title, Trailer, Transfer-Encoding, UA-Color, UA-Media, UA-Pixels, UA-Resolution, UA-Windowpixels, URI, Upgrade, User-Agent, Variant-Vary, Vary, Version, Via, Viewport-Width, WWW-Authenticate, Want-Digest, Warning, Width, X-Content-Duration, X-Content-Security-Policy, X-Content-Type-Options, X-CustomHeader, X-DNSPrefetch-Control, X-Forwarded-For, X-Forwarded-Port, X-Forwarded-Proto, X-Frame-Options, X-Modified, X-OTHER, X-PING, X-PINGOTHER, X-Powered-By, X-Requested-With");
   
           chain.doFilter(req, httpResponse);
       }
   
       @Override
       public void destroy() {
       }
   }
   

   여기 originList는 application.yml 또는 properties 파일에서 구성 할 수있는 원본의 목록입니다.

from https://stackoverflow.com/questions/36163672/cors-issue-with-spring-boot by cc-by-sa and MIT license