Today I Learned/in dev

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

떼굴펜 2024. 7. 5. 15:41

서론

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