[Vue.js] 공공데이터 openapi사용시 CORS에서 해결방법

아니 진짜 무슨 CORS에러 잡는데 2시간이나 씀..

openapi갖다 쓰는데 이렇게 오래걸리면 진쨔… 아우야 짜증난다아아아아아

어쨌거나 해결했으니 이건 지금 당장 기록해놓지 않으면 당장 까먹으니까 지금 써놔야지

(암만 생각해도 난 정말이지 기억력이… 너무 짧은것같아 흑흑)

우선은 CORS에러는 보안을 위해서 탄생된 개념이라고 생각하면 되는데,

도메인이 다른 웹페이지의 request를 방지하기 위한 용도라고 가볍게 생각하면 된다.

우선 회사같은 경우에는 백엔드서버 개발자에게 header에 origin전체 허용을 가능하게 해주는 코드 한줄만 넣어달라고 하면 되겠지만

이런 개인으로 작업하는 api작업을 해주는 백엔드개발자에게 이걸 요청할수는 없으니

프론트에서 알아서 처리해주어야한다.

특히 localhost에서 요청하는 경우는 딱 봐도 도메인이 다르기 때문에 무조건 cors에러가 발생하게 되는데

(http://localhost:8080 과 http://openapi.data.go.kr 한눈에봐도 걍 다르니 cors에러 발생100%)

이걸 이제 localhost에서 openapi를 요청했을때 어떻게 에러발생없이 잘response하도록 할것인지에 대해서 작성해보겠다!!!

CORS에러에 대한 내용은 블로그에 정말정말 정~~~말 많으니 그걸 참조하면 되겠댜

사실 그래서 이거 해결하는데도 왜 이렇게 오래 걸린건지 스스로도 이해가 좀.. 안가긴하는데

제시해준 모든 방법이 안먹었고, 다들 express서버 이용해서 하는 방법만 알려줘서 내가 하고자하는 방향과는 맞지 않았음 ㅠㅠㅠ

우선 최상단레벨에 있는 vue.config.js를 설정해주어야한다.

만약 vue.config.js가 없다면 그냥 만들어주면 된다. 최상단이어야 함 최상단package.json과 같은 레벨

vue.config.js는 여러모로 설정해줄 수 있는 것이 많이 때문에 하나 만들어두면 좋다.

빌드한 이후 디폴트 경로 설정도 여기서 해주고,

ie의 폴리필도 여기서 해주고,

esline설정도 여기서 해주기 때문인데,

이 cors에러를 해결하는 방법인 proxy도 여기서 설정한다.

proxy는 영어로 ‘대신하다’라는 뜻이 있는데 그만큼 개발자라면 한번쯤은 들어봤을 그 ‘프록시 우회’ 를 여기서 사용하게 된다.

그러니까, openapi 서버에 접근할때 local에서는 localhost로 request를 한다고 착각하게 하지만 실제로는 openapi도메인으로 request를 하는것이다.

그래서 결론은 vue.config.js 파일에다가는 아래 코드를 넣는다

module.exports = {
  devServer: {
    proxy: {
      '/':{
        "target":'http://openapi.molit.go.kr:8081',
        "pathRewrite":{'^/':''},
        "changeOrigin":true,
        "secure":false
      }
    }
  }
}

코드는 이렇다.

target에 내가 받아오고자 하는 api를 적어주면 되고port명이 있다면 port명도 적어주어야 한다(보통은 없는데 molit같은경우는 있었음)

(기술블로그인데 code를 이미지로 박아놓는 사람들 정말이지 원망스럽다…^^….

난 친절하게 복사 가능하도록…!)

아, 그리고 config파일은 자동 새로고침으로 적용이 안되기 때문에 서버한번 죽였다가 다시 띄워줘야한다

설정하고나면 ctrl+c 하고 다시 npm run serve해주기~

그리고 이제 실제로 axios(ajax)를 보낼곳에 가보자

async callingList(payload){
	const url = "/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade"
	try{
        const test = await axios.get(url)
        console.log(test)
    }catch(e){
        this.slackMsg('');
    }finally{
        this.loading = false;
    }
},

여기서 중요한 부분은 url에다가 target에 적어놓은 url은 제거하고 적어줘야한다는 것이다

그러니까 원래 url은

http://openapi.molit.go.kr:8081/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade

이었다면

http://openapi.molit.go.kr:8081은 vue.config.js에 이미 적어주었으니

get은 “/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade”만 적어주는것이다.

그러면 크롬 개발자도구 network탭에

ttp://localhost:8080/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade

라고 request했는데도 200으로 받아오는것을 알 수 있다

근데

Access to XMLHttpRequest at ‘http://172.30.1.21:8080/sockjs-node/info?t=1622856962939’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

라는 에러는 계속해서 뜬다

왜이러는지 모르겠듬 흥

Share this post