Aaron
1k
2019-07-23 17:13:58
1
218

Vue - Node 토이프로젝트 개발 중 CORS 정책 위반? 에러가 발생합니다.


우선 Node 기반 Backend 서버가 있고,

Vue로 개발 중인 Frontend 서버가 있습니다.


Node 기반 백엔드 서버에는 Maria DB로 데이터를 저장하고 있고요,

express를 통해 REST API 를 제공하고 있습니다.

Postman으로 확인 시 REST API 서버는 정상 동작합니다.


Vue cli로 별도 프론트엔드 페이지를 개발하는데,

이 백엔드 서버에 접속해서 데이터를 가져오고 싶어 axios를 사용하는데

아래와 같은 에러가 발생합니다.


Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


localhost:3000 이 백엔드고

localhost:8080이 프론트엔드입니다.


테스트를 위해 우선 로컬 환경에서 해보고 있는데, 이런 에러가 발생하네요..

어찌하면 좋을까요?;;;

0
0
  • 답변 1

  • Aaron
    1k
    2019-07-23 17:21:07

    자문자답입니다.


    서버에서 Response를 보낼 때 헤더에 아래와 같이 추가해주면 되네요.

     Access-Control-Allow-Origin: * 

    테스트 용에서는 *으로 해줘도 되겠지만,

    상용화할 땐 *를 서비스 제공하는 특정 도메인으로 바꿔줘야겠고요...


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