묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결스프링 시큐리티
수업 내용은 아니지만 Security 관련 질문요청드립니다!
안녕하세요! 좋은 강의 해주셔서 감사드립니다! 다름이아니라 리액트+스프링부트+스프링시큐리티 환경에서 로그인api 연동중에 CORS 이슈가 발생하여 구글링을 계속하였지만 결국 문제점을 해결하지 못하였습니다.. 죄송스럽지만 이렇게 질문 요청드립니다!! 질문요청드릴 내용은 스프링 시큐리티에서 CORS 설정 부분입니다. 우선 제가 적용한 코드는 아래와 같습니다! @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Bean public CorsConfigurationSource corsConfigurationSource(){ CorsConfiguration configuration = new CorsConfiguration(); configuration.addAllowedOriginPattern("*"); configuration.setAllowedMethods(Arrays.asList("*")); configuration.setAllowedHeaders(Arrays.asList("*")); configuration.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); return source; } @Override protected void configure(HttpSecurity http) throws Exception { http .csrf().disable() .cors().and() .authorizeRequests() .antMatchers("/","/api/register","/api/login","/h2-console/**","/api/email","/api/verify","/api/matching/**").permitAll(); http.addFilterBefore(loginProcessingFilter(), UsernamePasswordAuthenticationFilter.class); //ajax 인증방식 사용 http.headers().frameOptions().disable(); //h2 console 접근 } } 이후 talend API Tester를 이용해서 api 테스트를 해본 결과 GET방식에는 문제가 없었으나 POST방식에서 403 에러 가 발생하였고 확인해본결과 preflight 요청에 대한 응답을 보내지못하는 문제로 판단되었습니다. 문제점을 해결하기 위해 configure 메소드에 아래와 같이 preflight 요청을 허가하는 코드를 작성 해보았지만 결과는 동일 하였으며 http.authorizeRequests() .requestMatchers(CorsUtils::isPreFlightRequest).permitAll( 스프링부트에서 configuration.allowCredentials(true) 와 configuration.allowedOrigins("*") 는 동시에 설정 못하도록 하였다고 해서 configuration.allowCredentials(true) 대신 .allowedOriginPatterns("*") 으로 변경해보았지만 역시 결과는 동일했습니다. 추가로 fliter의 순서가 문제인것같아 Filter를 상속받는 CORSFilter를 만들어서 적용해보았지만 결과는 동일 하였습니다. (해당부분은 https://sas-study.tistory.com/298 이 블로그를 참조했습니다.) 현재 어느 부분에서 해결점을 찾아야 할지 갈피를 못집고 있는 상황이라 이렇게 질문 요청드립니다..ㅜㅜ 답변해주시면 정말 감사드리겠습니다!
-
미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
CORS error
CORS error를 피하기 위한 방법으로 devServer: { proxy: ".....", } 이렇게 프락시 서버를 설정해서 피했는데, 근데 이것은 Development 모드 일때만 적용되는 된다고 생각합니다. 실제 Production에서는 dist 만 배포될텐데 Production 에서는 어떤 해결방법이 있나여???
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
서로 다른 Origin끼리의 axios 사용법
안녕하세요! 지금 강의 따라가면서 axios 사용법을 익히는 중입니다~ 다른 서버에서 돌아가고 있는 php 파일을 axios로 불러오고 싶은데 cors 정책에 걸려서 다음으로 나갈 수가 없어서요..! 서로 다른 서버에서의 axios 사용은 어떻게 하는게 좋을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
open API 이용 시에 cors 문제해결에 대해 질문드립니다.
안녕하세요! 강의에서 알려주신대로 프론트-백엔드 서버 요청, 응답은 cors를 통해 해결했었는데요. 제 백엔드 서버가 아닌 오픈 api를 테스트 해보려고 하다가 난관에 막혀 질문드립니다. 강의에서 서버와 서버의 통신에는 cors 문제가 안생긴다고 하여 브라우저에서 제 백엔드로 요청을 먼저 보내고 그 다음에 오픈 api로 요청을 보내는 방식으로 작업을 했는데요. 동작에는 문제가 없긴한데, 좀 느린것 같기도하고... 문제가 생길까 염려되어 질문드립니다. 또한 문제가 있다면 좋은 방법은 무엇일까요? ㅠㅠ 일단 동작하기 위해 아래와 같이 처리했습니다.. + 추가로 기존 글이 있나 찾아보고 질문을 추가합니다!! https://www.inflearn.com/questions/81377 위에 제가 진행한 방식과 프론트에 proxy서버를 따로 띄워(?) 작업하는 방식이 사용하는 상황이 다를 뿐 성능과는 차이가 없나요? (백엔드 서버가 없을 경우 프론트에서 proxy를 사용하는건가요??)