CORS 크로스 도메인 이슈 글에 잘 설명되어있다!

vue로 api를 받아와 웹사이트를 만들어보려했는데 받아오지 못하고 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 라는 에러만 콘솔에 찍히고 network error 뜨고 뭐… 그랬다.

알아보니 vue는 localhost이고 api는 다른 도메인이라 크로스 도메인 이슈가 발생하는 것이었음.

그래서 이 api에 요청을 했을때 접근을 막는것이었음!

이럴떄는 api에서 접근을 허용하는 헤더를 넣어주면 된다.

나는 asp파일에서 api를 만들었으므로 헤더를 설정할때

Call response.AddHeader("Access-Control-Max-Age", "3600")
Call response.AddHeader("Access-Control-Allow-Headers", "x-requested-with")
Call response.AddHeader("Access-Control-Allow-Origin", "*")

로 설정하였다.

asp에서 참고로 Call 쓰지 않으면 ‘Sub를 호출할 때는 괄호를 사용할 수 없습니다’ 라는 에러를 뿜는다.

저렇게 세팅해주면 로컬에서도 잘 받아온다.