[vercel] 배포했더니 CORS가 난다 (next/node/vercel)

서론

vercel 배포했더니 왜 vercel domain 3개 중에 2개가 cors가 날까요?

왜??? 자기끼리 CORS가 나는 건 무슨? (사실 자기들끼리라는 말은 잘못되었다 엄연히 다른 URL인걸?)

 

해결책

모두에게 문을 열어주자! 

 

case 1. Next.js 사용하는 경우, 설정 파일(next.config.js)에 아래 내용을 추가한다.

 

const nextConfig = {

  headers: () => {

    return [

      {

        source: "/api/:path*",

        headers: [

          { key: "Access-Control-Allow-Credentials", value: "true" },

          { key: "Access-Control-Allow-Origin", value: "*" },

          {

            key: "Access-Control-Allow-Methods",

            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",

          },

          {

            key: "Access-Control-Allow-Headers",

            value:

              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",

          },

        ],

      },

    ];

  }

};

export default nextConfig;

 

 

 

case 2. vercel 설정 파일 (vercel.json)에 아래 내용을 추가한다.

{

  "headers": [

    {

      "source": "/api/(.*)",

      "headers": [

        { "key": "Access-Control-Allow-Credentials", "value": "true" },

        { "key": "Access-Control-Allow-Origin", "value": "*" },

        {

          "key": "Access-Control-Allow-Methods",

          "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"

        },

        {

          "key": "Access-Control-Allow-Headers",

          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"

        }

      ]

    }

  ]

}

 

 

case 3. node.js serverless function 에서 사용방법

const allowCors = (fn) => async (req, res) => {

  res.setHeader("Access-Control-Allow-Credentials", true);

  res.setHeader("Access-Control-Allow-Origin", "*");

  // another common pattern

  // res.setHeader('Access-Control-Allow-Origin', req.headers.origin);

  res.setHeader(

    "Access-Control-Allow-Methods",

    "GET,OPTIONS,PATCH,DELETE,POST,PUT"

  );

  res.setHeader(

    "Access-Control-Allow-Headers",

    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"

  );

  if (req.method === "OPTIONS") {

    res.status(200).end();

    return;

  }

  return await fn(req, res);

};

const handler = (req, res) => {

  const d = new Date();

  res.end(d.toString());

};

module.exports = allowCors(handler);

 

 

 

 

 

참고) 공식 문서 : https://vercel.com/guides/how-to-enable-cors