-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
외부 api 연동 cross origin 에러
20.10.23 18:21 작성 조회수 1.55k
0
안녕하세요.
강의 내용을 활용해서 외부 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.
답변을 작성해보세요.
3
조현영
지식공유자2020.10.25
서버쪽을 건들 수 없는 상황이면 proxy 서버를 띄우는 것밖에 답이 없습니다. 저 위에 에러는 CORS는 적용되었는데 쿠키까지 사용하려면 CORS 설정을 조금 바꿔줘야한다는 거라서 서버쪽에서 수정을 해야하는 문제입니다. proxy 서버는
https://nextjs.org/docs/api-reference/next.config.js/rewrites#rewriting-to-an-external-url
이렇게 설정할 수 있습니다. 또는 http-proxy-middleware를 쓰거나요.
2
조현영
지식공유자2020.10.26
module.exports를 두 번 쓰신건가요? 한 파일에서 한 번만 쓸 수 있습니다. async rewrites를 compress 위에 넣으시면 될듯 합니다.
2
1
최태범
질문자2020.10.26
머가 다른 셋팅을 추가적으로 해줘야하나요? 여러 방법으로 시도중인데 안되서 주석처리하고 따로 빼줘도 안되네요 미들웨어 추가도 안되고 죄송하지만 한번더 문의드립니다.ㅜㅜ
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*`,
},
]
},
}
0
0
0
최태범
질문자2020.10.25
api 서버에 localhost 등록이 된상태입니다. 2년전에 배운 react redux-thunk 베이스(프록시 서버X)에서 테스트 시 이상이 없었습니다. 이런 상황이면 어떤 부분을 의심해봐야할까요? 기초가 부족해서 그런지 찾아볼려고해도 감이 안잡혀서 난감한 상황입니다ㅜㅜ
답변 7