:::: 개발 ::::/::: Vue:::

vue SSO 작업 중 error 해결 정리

nayha 2023. 2. 7. 09:57


1. cors 오류 
   헤더에 Allo..: "*" 해도 안됨.. 

   vue.config.js 
     proxy 설정
     기존 설정을 건드리면 안되니 /url/ 조건 추가..
     아래 설정 침고
    devServer: {
        proxy: {
            '/api': {
                target: "http://localhost:8080",
            },
            '/oauth':{
                target: 'https:// cors 가 걸리는 도메인/,
            }          
        }
    },


2. 항상 서버에서 전달된 키를 잘 확인하자
   클라이언트아이디+시크릿키 base64로 조합하는거였는데 앞부분만 확인하고 뒤 시크릿키가 잘못되어 있었다.
   2시간 이상 삽질..


3. Content-Type application/x-www-form-urlencoded
   으로 데이터를 전달할때는
    // form 객체 생성
       let frm = new FormData()
       frm.append('code', '코드')
    위 방법으로 하면 header가 muilty 어쩌고로 고정되어 날라갔다..
    그래서 form 을 히든으로 변경했더니 header는 변경 되었지만 
    urldecode 문제가 발생하여
    grant type is not supporte  등 파라미터가 제대로 전달되지 않았다.

    해서 또 찾아본게 URLSearchParams
    const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/foo', params);

    위 방법으로 정상적으로 form 데이터 전달 할 수 있었다..

    삽질에 연속이였다.

    다음에도 까먹겠지.. 그럴꺼야 빡 -_ㅠ

반응형