spring boot) vue + spring boot websocket 웹소켓 proxy error

vue에서 프록시를 사용하고 있다. 

vue -> spring boot로 rest api로 구성되어 있는데 http 프로토콜을 사용한다.

채팅구현을 위해 웹소켓 프로토콜을 이용해 서버에 요청을 해야한다.

 

vue.config.js 파일을 다음과 같이 하였다

const { defineConfig } = require('@vue/cli-service')

const 사설ip = '주소생략';
const 운영 = '주소생략';
const 개발 = 'localhost:8082';

const 프로토콜 = {
  API: 'http://',
  WS: 'ws://'
}

const access_point = 운영;

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  devServer: {
    proxy: {
      '/': {
        target: `${ 프로토콜.API }${ access_point }`,
        changeOrigin: true,
        ws: false // 🎈 기존 api 는 ws false로 해서 프록시 타고 요청함
      },
      '/ws': {
        target: `${ 프로토콜.WS }${ access_point }`,
        changeOrigin: true,
        ws: true // 🎈 웹소켓 true로 해줘야함
      },
    }
  },
})

 

 

changeOrigin은 도메인을 사용하냐 유무이고

ws는 웹소켓 프로토콜 사용 유무이다.

 

path 기준은

포트 다음에 오는 걸로 보면 된다.

 

나는 웹소켓 api url이

'localhost:8080/ws/chat' 이기 때문에

/ws로 기준하여 프록시 설정을 해주었다. 

 

초반에 프록시 설정을

하지 않아서 채팅이 하루동안 구현을 못했다. 

 

 

ws:// 을 사용하여 proxy 설정하기