Closed Jongmo-kim closed 2 years ago
Frontend에서 backend의 api호출시 CORS에러가 발생합니다. 백엔드 서버에서 이를 허용할수 있게 CORS설정을 추가합니다.
Access to fetch at 'http://localhost:9090/api/greeting' from origin 'http://localhost:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
또한 프론트엔드 서버에서 backend의 api호출할때 url의 호스트 부분을 어떻게 가져올지 고민합니다. (/localhost:9090 부분)
frontend 폴더에 vue.config.js 파일을 다음과 같이 설정하면 webpack단위에서 요청을 변환해줍니다. 자세한사항은 (https://evan-moon.github.io/2020/05/21/about-cors/)를 참고했습니다.
devServer: {
proxy: {
'/': {
target: 'http://localhost:9090',
changeOrigin: true,
pathRewrite: { '^/': '' },
},
}
},
테스트용 코드가 구현되었으므로 이슈를 닫습니다.
Backend에 /greetings URL Mapping을 추가하여 통신이 가능한지 테스트합니다. Frontend에 backend의 /greetings 을 호출해서 정상적인 통신이 가능한지 테스트합니다.