외부 api 연동 cross origin 에러

Question

안녕하세요. 강의 내용을 활용해서 외부 api를 연동해서 연습중인데 dev 환경이라 그런지 cross origin 에러로 호출을 못하고 있습니다. 어떻게 해결을 해야할까요? 에러 로그------------------------------------------------------------------------------------------------------------ origin 'http://localhost:3060' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

제로초(조현영) · Answer

서버쪽을 건들 수 없는 상황이면 proxy 서버를 띄우는 것밖에 답이 없습니다. 저 위에 에러는 CORS는 적용되었는데 쿠키까지 사용하려면 CORS 설정을 조금 바꿔줘야한다는 거라서 서버쪽에서 수정을 해야하는 문제입니다. proxy 서버는  https://nextjs.org/docs/api-reference/next.config.js/rewrites#rewriting-to-an-external-url 이렇게 설정할 수 있습니다. 또는 http-proxy-middleware를 쓰거나요.

제로초(조현영) · Answer

module.exports를 두 번 쓰신건가요? 한 파일에서 한 번만 쓸 수 있습니다. async rewrites를 compress 위에 넣으시면 될듯 합니다.

제로초(조현영) · Answer

그 api에 localhost 등록이 불가능한가요? 그렇다면 프록시 서버를 띄워야 합니다. 서버->서버 요청은 cors에 안 걸려서요.

최태범 · Answer

머가 다른 셋팅을 추가적으로 해줘야하나요? 여러 방법으로 시도중인데 안되서 주석처리하고 따로 빼줘도 안되네요 미들웨어 추가도 안되고 죄송하지만 한번더 문의드립니다.ㅜㅜ const withBundleAnalyzer = require('@next/bundle-analyzer')({   enabled: process.env.ANALYZE === 'true', }); /* module.exports = withBundleAnalyzer({   compress: true,   webpack(config, { webpack }) {     const prod = process.env.NODE_ENV === 'production';     return {       ...config,       mode: prod ? 'production' : 'development',       devtool: prod ? 'hidden-source-map' : 'eval',       plugins: [         ...config.plugins,         new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /^\./ko$/),       ],     };   }, });*/ module.exports = {   async rewrites() {     return [       // we need to define a no-op rewrite to trigger checking       // all pages/static files before we attempt proxying       {         source: '/:path*',         destination: '/:path*',       },       {         source: '/:path*',         destination: `http://api-stage.test.com:1313/:path*`,       },     ]   }, }

최태범 · Answer

아주 잘됩니다 빠른답변 감동입니다 정말 감사합니다!!ㅎㅎ

최태범 · Answer

답변 감사합니다. 제가 프록시 서버를 개념을 착각하고 있네요 이제 해결 가능할 것 같습니다 다시한번 감사합니다.

최태범 · Answer

api 서버에 localhost 등록이 된상태입니다. 2년전에 배운 react redux-thunk 베이스(프록시 서버X)에서 테스트 시 이상이 없었습니다.  이런 상황이면 어떤 부분을 의심해봐야할까요? 기초가 부족해서 그런지 찾아볼려고해도 감이 안잡혀서 난감한 상황입니다ㅜㅜ