smallyong
173
2020-03-03 18:21:32
2
2149

vue와 springboot를 이용해서 웹소켓통신을 하려고합니다.(cors문제?)


안녕하세요  하.. 뷰랑 스프링부트 처음 써보는데 정말 힘드네요ㅠㅠㅠ

잡담 그만하고 질문 먼저 드리자면 vue와 spring boot를 이용해서 웹소켓 통신을 하려고 합니다.

vue는 8080포트를 이용하고 있고 spring boot는 9191포트를 이용하고 있습니다.

connect (channelList) {
    this.socket = new SockJS('http://localhost:9191/endpoint/')
    this.stompClient = Stomp.over(this.socket)
    this.stompClient.connect ({}, function(){
      console.log('연결')
      for(i in channelList){

      }  
    })
  }

다음과 같이 sockjs와 stomp를 이용하여 웹소켓서버와 연결을 하려고하는데

처음에는 아래와 같은 에러가 뜨길래

Access to XMLHttpRequest at 
'http://localhost:9191/endpoint/info?t=1583213807555' from origin 
'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.


스프링부트에서 다음 링크(https://oddpoet.net/blog/2017/04/27/cors-with-spring-security/)와 같이 cors설정을 추가해주었씁니다. 스프링 시큐리티를 사용중에 있어서 cors설정을 추가해주었습니다.

추가해주어서 cors policy 관련 에러는 사라졌지만 아래와 같은 새로운 에러를 만나게 되었습니다.

WebSocket connection to 'ws://localhost:9191/endpoint/184/yjp3dvvp/websocket' failed: Error during WebSocket handshake: Unexpected response code: 302


혹시나 싶어서 spring security 설정 말고 따로 cors filter를 만들어서 다음과 같이 코딩해주었습니다.

@Component
public class CORSFilter implements Filter {
	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		HttpServletResponse servletresponse = (HttpServletResponse) response;
		servletresponse.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
		servletresponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
		servletresponse.setHeader("Access-Control-Max-Age", "3600");
		servletresponse.setHeader("Access-Control-Allow-Headers", "x-requested-with");
		chain.doFilter(request, response);
	}
}

그래도 여전히 상황은 제자리 걸음이더군요..ㅠ


저 에러는 대체 어떻게 하면 사라질까요..ㅠ

서버측 웹소켓 설정코드랑 network 캡처사진 올리면서 글을 마무리하겠습니다.

제 어느 부분이 잘못된건지, 어느 부분을 고치면 상황이 나아갈지 아시는 분은 조언 좀 부탁드립니다..ㅠ

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{
	@Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/endpoint").setAllowedOrigins("http://localhost:8080")
                .withSockJS();
    }
}



General
Request URL: http://localhost:9191/endpoint/info?t=1583226121867
Request Method: GET
Status Code: 302 
Remote Address: [::1]:9191
Referrer Policy: no-referrer-when-downgrade

Response header
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:8080
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 0
Date: Tue, 03 Mar 2020 09:02:01 GMT
Expires: 0
Keep-Alive: timeout=60
Location: http://localhost:9191/
Pragma: no-cache
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block

Request Header
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Cookie: _ga=GA1.1.475809782.1582776261; JSESSIONID=C41271A09549AD8C8E0480B4220694A7
Host: localhost:9191
Origin: http://localhost:8080
Referer: http://localhost:8080/about
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36
t: 1583226121867



0
  • 답변 2

  • smallyong
    173
    2020-03-03 18:51:43

    spring boot 프로젝트 새로 만들어서 다시 구성해주었더니 연결 잘 되네요...ㅠㅠㅠㅠ 

  • smallyong
    173
    2020-03-03 19:08:50

    아 spring security 권한 문제였습니다. 권한을 풀어주니 잘 통신되네요..

    하루 이틀 고민하면서 도저히 안되겠다 싶을때 오키에다 도움을 청하는데  항상 글올린지 얼마되지 않아 혼자 문제를 해결하네요ㅋㅋㅋㅋㅋㅋㅋ 자문자답이 민망하네요ㅠ

  • 로그인을 하시면 답변을 등록할 수 있습니다.