部署在Vercel的MERN应用配置CORS后仍出现跨域错误求助

问题场景 #

将MERN应用的前端与后端分别部署在Vercel的两个独立域名下，相关配置及错误信息如下：

后端CORS配置 #

app.use(cors({credentials : true , origin : 'https://music-app-client-five.vercel.app'}));

前端请求代码 #

useEffect(() => {
      const getSongs = async ()=>{
        try {
            const response = await fetch(`${PROXY_URL}/api/song/list` , {
                credentials : 'include',
                headers: {
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Credentials": true,
                }
            })
            const data = await response.json();
            if (data?.error) {
                return;
            }
            if (response.ok) {
             setSongList(data.message);  
             setTrack(data.message[0]) ;
            }
        } catch (error) {
            console.log(error);
        }
      }
      getSongs();
    }, [])

Cookie配置 #

export const generateTokenAndSetCookie = (userId , res)=>{
    const token = jwt.sign({userId} , process.env.JWT_SECRET , {
        expiresIn : '15d', 
    } )
    res.cookie('jwt', token , {
        httpOnly: true,
        secure: true,
        sameSite: 'None'
    })

收到的CORS错误 #

Access to fetch at 'https://music-app-server-bice.vercel.app/api/song/list' from origin 'https://music-app-client-five.vercel.app' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://music-app-client-five.vercel.app/' that is not equal to the supplied origin.

错误原因 #

• CORS对Access-Control-Allow-Origin的匹配是严格字符串匹配，错误提示明确显示：后端返回的头值是https://music-app-client-five.vercel.app/（末尾带斜杠），但实际请求的源是https://music-app-client-five.vercel.app（末尾无斜杠），两者因斜杠差异不匹配，触发浏览器的CORS拦截。
• 这种差异可能是后端CORS中间件自动添加了斜杠，或是Vercel环境变量处理时引入的额外字符导致。

解决办法 #

• 统一origin格式：将后端CORS配置的origin改为带斜杠的版本，确保与实际请求源的字符串完全一致：

app.use(cors({credentials : true , origin : 'https://music-app-client-five.vercel.app/'}));

• 动态匹配忽略斜杠：如果不确定是否会出现斜杠差异，可使用函数动态判断origin，忽略末尾斜杠进行匹配：

app.use(cors({
  credentials: true,
  origin: (origin, callback) => {
    const allowedOrigin = 'https://music-app-client-five.vercel.app';
    // 移除两端斜杠后对比
    const normalizedOrigin = origin ? origin.replace(/^\/|\/$/g, '') : '';
    const normalizedAllowed = allowedOrigin.replace(/^\/|\/$/g, '');
    if (!origin || normalizedOrigin === normalizedAllowed) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}));

• 移除前端冗余请求头：前端请求中的Access-Control-Allow-Credentials是后端响应头，前端手动设置无意义，建议删除该配置项。

内容的提问来源于stack exchange，提问作者Aditya Nagare