크로스 도메인에 Springboot 우아한 솔루션의 아약스 + 사용자 정의 헤더를 요청하는 방법 [회전]

1. 크로스 도메인이란 무엇인가

브라우저 동종 전략이 있기 때문에 (동일 출처 정책, 그것은 넷스케이프에 의해 잘 알려진 보안 정책을 제안한다. 이제 모든 브라우저에서 자바 스크립트를 사용이 전략을 사용합니다. 소위 상동 도메인, 프로토콜, 같은 포트를 의미합니다.) 도메인 이름 사이에 요청 URL을 보낼 합의, 세 개의 포트와 크로스 도메인과 다른 현재 페이지 주소의.

세부 사항은 다음 표를 참조하십시오 :

2, 크로스 도메인 문제를 해결하는 방법을 springboot

1. 일반 크로스 도메인 솔루션을 요청합니다

① 요청 특수 인터페이스를 추가하는 @CrossOrigin (기원 = "http://127.0.0.1:8020"= 3600 MAXAGE)

설명 : 계자 전류 인터페이스 요청의 기원 = "http://127.0.0.1:8020"근원 값

② 일반적인 구성 (모든 인터페이스 크로스 도메인 요청 허용)

또는 방법 및 CorsConfiguration의 새로운 클래스 configration의 CorsFilter 응용 프로그램의 추가

@Configuration  
 공공  클래스 CorsConfig {  
     개인 CorsConfiguration buildConfig () {   
        CorsConfiguration corsConfiguration = 새로운 새로운 CorsConfiguration ();   
        corsConfiguration.addAllowedOrigin는 ( "*"); // . 하나는 모든 도메인의 사용을 허용 
        corsConfiguration.addAllowedHeader ( "*을"); // 이 어떤 수 있습니다 헤드 
        corsConfiguration.addAllowedMethod ( "*"); // . (3)는 임의의 방법을 허용 (포스트 등을 얻을) 
        반환 corsConfiguration 단계;   
    }   

    @Bean   
    공개 CorsFilter corsFilter () {   
        UrlBasedCorsConfigurationSource 자료 =새로운 UrlBasedCorsConfigurationSource ();  
        source.registerCorsConfiguration ( "/ **", buildConfig ()); // 4   
        반환  새로운 CorsFilter (소스);  
    }   
}

2.ajax 사용자 정의 헤더 크로스 도메인 요청

$ 아약스 ({ 
        유형 : "GET" , 
        URL : "HTTP : // localhost를 : 8766 / 주 / 통화 / sginInState" , 
        dataType와 : "JSON" , 
        데이터 : { 
            UID : userId를 
        }, 
        beforeSend : 기능 (XMLHttpRequest의) { 
            XMLHttpRequest.setRequestHeader ( "인증" , access_token이); 
        }, 
        성공 : 기능 (고해상도) { 
            을 console.log (res.code) 
        } 
    })

이 시점에서 요청에 http : // localhost를 : 8766 / / sginInState 인터페이스가 발견 / 통화 기본 옵션에 http : // localhost를 : 8766 / 주 / 통화 / 500 오류, 일반적인 크로스 도메인 솔루션이 문제를 해결할 수 없었습니다 sginInState, 왜 옵션을 요청 나타 납니까?

이유

실제로 옵션에 대한 사전 스크리닝 방법을 보낼 요청을 보내기 전에 브라우저는 Preflighted는 요청이 요청은 안전 확인하는 데 사용되지만, 모든 요청이 전송되지 다음 조건에 따라 요청 요청 :

요청 방법은 GET되지 / HEAD / POST
콘텐츠 형식의 POST 요청 / X-형태-urlencoded를 WWW, 다중 / 폼 데이터, 텍스트 / 일반 응용 프로그램이 아닙니다
요청은 사용자 정의 헤더 필드를 설정

인터페이스의 관리 측면의 경우, I 인터페이스를 확인 할 수있는 권한이 각 요청은 사용자 정의의 헤더의 필드 (토큰)을 수행 할 필요가있다, 브라우저는 요청의 안전성을 확인하기 위해 멀티 OPTIONS 요청을 보냅니다.

왜 500 옵션은 요청한다?

OPTIONS 요구는 해당 값으로 가지 않을 것이다, 단지 사용자 정의 필드를 전달하고, 배경 조사 토큰 토큰 필드가 NULL이기 때문에 인증이 실패하면 예외가 발생합니다.

그래서 우리는이 문제를 해결하기 위해 다음과 같습니다

① 봄 부트 프로젝트는 application.yml 추가

봄 : 
MVC : 
디스패치 옵션 요청 : 사실

참고 :이 솔루션은 경우에 따라 환경 문제가 복잡한 사용자 정의 필터 필터 구성 문제가 될 수 아마도 인해, 문제 OPTIONS가 해결되지 수 있습니다.

필터 구성을 추가 ②

단계 : 이러한 클래스의 HandlerInterceptor 클래스를 달성하는데 필요한 필기 RequestFilter 요청 필터 구성은 클래스의 HandlerInterceptor org.springframework.web.servlet.HandlerInterceptor이다.

특정 코드 구현 :

@Component
 공공  클래스 RequestFilter는 구현 {의 HandlerInterceptor를
    공개  부울 preHandler (HttpServletRequest의 요청, HttpServletResponse를 응답 개체 처리기) { 
       response.setHeader ( "액세스 제어 - 허용 - 기원", "*" ); 
       response.setHeader ( "true"로 "액세스 제어가--자격 증명을 허용" ); 
       response.setHeader는 ( "GET, HEAD, POST는 PUT는, 패치, DELETE, OPTIONS", "액세스 제어는--방법을 허용" ); 
       response.setHeader ( "액세스 제어 - 최대 에이지", "86400" ); 
       response.setHeader ( ");
        // 옵션의 끝이 요청하는 경우 
       IF (HttpMethod.OPTIONS.toString () 등호 (request.getMethod은 ())). { 
           것은 response.setStatus이 (HttpStatus.NO_CONTENT.value ()); 
           반환  false로 ; 
       } 
       반환  true로를 ; 
   } 
}

단계 : 이러한 WebMvcConfigurationSupport을 상속 할 필요가 필기 MyWebConfiguration.

참고 : WebMvcConfigurationSupport가 2.X 버전, 1.x의 버전 WebMvcConfigurerAdapter 이상입니다.

특정 코드 구현 :

@Component
 공공  클래스 MyWebConfiguration는 확장 WebMvcConfigurationSupport { 
    @Resource 
    개인 RequestFilter의 requestFilter을; 
    @Override 
    공공  무효 addInterceptors (InterceptorRegistry 레지스트리) {
         // 跨域拦截器 
        registry.addInterceptor (requestFilter) .addPathPatterns ( "/ **" ); 
    } 
}

이 시점에서 우리는 크로스 도메인 아약스 + 요청자가 정의 헤더에 대한 완벽한 솔루션은 학습의 무료 교환을 주시기 바랍니다 있습니다.