cors

cors를 해결하기 방법은 크게 두 가지다.

1. 서버단에서 해당 아이피를 허용함
2. 프론트단에서 해당 아이피(혹은 주소) 로 프록시 설정함

cors 위반을 확인하는 작업은 브라우저에서 이루어지므로 프론트단에서도 해결이 가능하다.

이를 위해 next.config.js 를 수정할 필요가 있다.

//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    compiler: {
        styledComponents: true,
    },
    async rewrites() {
        return [
            {
                source: '/:path*',
                destination: '<http://moida-skhu.duckdns.org/:path*>',
            },
        ];
    },
};

module.exports = nextConfig;

위와같이 설정하면 axios와 같은 툴로 ajax 접근시

axios
                .post('/login', {
                    username: idData,
                    password: pwData,
                })

위와같이 path만 넘겨주면 된다.

주의해야할 점은 path가 프론트단 라우터 주소(./pages 내 파일명)와 일치할 경우 프론트단 서버로 요청이 전송된다.