Spring Authorization Server 1.0.0:/oauth2/token 요청 시 javascript 오류 발생

Question

Spring 인증 서버를 만들었습니다. github https://github.com/costerutilo/UTILO-Authorization-Server

에서 코드를 찾을 수 있습니다.

JavaScript를 통해 토큰을 읽을 수 없습니다. 클라이언트 인증 코드를 얻기 위해 간단한 Vue 웹 애플리케이션을 만들었지만 토큰을 얻을 수 없습니다.

가져오기 API를 사용해 보세요:

const url = 'http://127.0.0.1:9000/oauth2/token';

    var 자격 증명 = btoa(import.meta.env.VITE_CLIENT_ID + ':' + '비밀');
    var basicAuth = '기본' + 자격 증명;

    var myHeaders = 새 헤더();
    //myHeaders.append("인증", "기본 dXRpbG8tY2xpZW50OnNlY3JldA==");
    myHeaders.append("인증", basicAuth);
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

    var urlencoded = new URLSearchParams();
    urlencoded.append("grant_type", "authorization_code");
    // urlencoded.append("코드", "yyJTTI3JqNno1XlSW59qxX3CCytMm-ChoHnqVw3iSUGyT6ltT_tpPclQ8bdSyeApO4IWE442irBiRwntJJzae9BIntpC3_vshTgNhAfbsBlkwh3n50jkAxs 3h Tqavqsy");
    urlencoded.append("코드", 코드);
    urlencoded.append("redirect_uri", "https://www.utilo.eu");

    var 요청 옵션 = {
      메소드: 'POST',
      헤더: myHeaders,
      본문: urlencoded,
      리디렉션: '따라가기'
    };

    가져오기(URL, 요청옵션)
        .then(응답 => response.text())
        .then(결과 => console.log(결과))
        .catch(error => console.log('error', error));

브라우저의 자바스크립트 콘솔에 CORS 예외가 표시됩니다

원본 'http://127.0.0.1:9010'에서 'http://127.0.0.1:9000/oauth2/token'을 가져오기 위한 액세스 권한이 있습니다. CORS 정책에 의해 차단되었습니다. 실행 전 요청에 대한 응답이 액세스 제어 확인

을 통과하지 못했습니다.

서버 콘솔에 다음 오류가 표시됩니다.

2023-02-27T09:35:53.786+01:00 TRACE 33212 --- [nio-9000-exec-3] o.s.s.w.a.ExceptionTranslationFilter : AnonymousAuthenticationToken 보내기 [ Principal=anonymousUser, Credentials=[PROTECTED], Authenticated=true, Details=WebAuthenticationDetails [RemoteIpAddress=127.0.0.1, SessionId=null], Granted Authorities=[ROLE_ANONYMOUS]] 액세스가 거부되었으므로 인증 진입점에 대해

org.springframework.security.access.AccessDeniedException: 액세스가 거부되었습니다

Postman에서 동일한 요청을 시도하면 토큰과 함께 JSON을 받게 됩니다.

내 추론의 오류가 무엇인지, 무엇을 잘못하고 있는지 모르겠습니다.

Answer 1

Spring Security 필터 체인 에 대해 CORS 를 활성화하고 @Bean이 예제 와 같은 을 제공하려면 가 필요합니다.

으아악 참고: 4200Port

는 Angular 개발 환경용이므로 Vue 개발 서버 포트로 바꾸세요. 🎜