Next.js跨域重定向异常：部分页面触发CORS Policy错误排查

问题根源分析 #

你遇到的差异核心在于调用后端重定向接口的方式不同：

• Profile页面的按钮应该是直接通过浏览器原生导航触发跳转（比如<a>标签、window.location.href），这类导航行为不会触发CORS检查；
• 首页和VisitRealURL页面则是通过AJAX请求（fetch/axios）调用后端接口，浏览器会对跨域AJAX请求做预检查（OPTIONS请求），而后端接口未配置CORS响应头，导致报错。

另外，VisitRealURL页面如果在客户端发起请求，同样会触发CORS限制，因为客户端请求属于跨域AJAX范畴。

解决方案 #

1. 调整前端调用方式（优先推荐） #

如果不需要在跳转前执行复杂前端逻辑，直接把按钮改成原生导航方式：

• 用<a>标签直接指向后端重定向接口：

<a href="/api/visit-link?id=xxx" target="_blank" rel="noopener noreferrer">跳转</a>

• 或者用window.location.href触发跳转：

const handleRedirect = () => {
  window.location.href = `/api/visit-link?id=${slug}`;
};

这种方式属于浏览器页面导航，不会触发CORS检查，可直接绕过问题。

2. 后端配置CORS（如果必须用AJAX调用） #

如果需要先执行前端逻辑再跳转，后端必须配置CORS响应头：

方式一：手动添加响应头

修改你的visitLink接口：

const visitLink = async (req, res, next) => {
  try {
    // 配置CORS头，生产环境请指定具体前端域名，不要用*
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

    // 处理OPTIONS预请求
    if (req.method === 'OPTIONS') {
      return res.status(200).end();
    }

    const { id } = req.query;
    const website = await Urls.find({ slug: id });
    res.redirect(`https://www.google.com`);
  } catch (error) {
    throw new Error(error.message);
  }
};

方式二：使用CORS中间件（更简洁）

安装cors包：

npm install cors

在Express应用中全局或局部配置：

const cors = require('cors');

// 全局配置（允许指定域名）
app.use(cors({ origin: 'http://localhost:3000' }));

// 或者仅给visitLink接口单独配置
app.get('/api/visit-link', cors({ origin: 'http://localhost:3000' }), visitLink);

3. 优化VisitRealURL页面的重定向逻辑 #

把重定向逻辑移到服务器端（getServerSideProps），完全避免客户端跨域请求：

// VisitRealURL.js
export async function getServerSideProps(context) {
  const { id } = context.query;
  try {
    const website = await Urls.find({ slug: id });
    // 服务器端直接返回重定向指令
    return {
      redirect: {
        destination: `https://www.google.com`,
        permanent: false,
      },
    };
  } catch (error) {
    // 错误处理：比如跳转到404页面
    return {
      redirect: {
        destination: '/404',
        permanent: false,
      },
    };
  }
}

export default function VisitRealURL() {
  // 页面内容会被重定向覆盖，无需额外逻辑
  return <div>跳转中...</div>;
}

这种方式下，服务器端直接处理数据库查询和重定向，客户端不会发起跨域请求，彻底解决CORS问题。

关键注意事项 #

• 生产环境禁止使用Access-Control-Allow-Origin: *，必须指定你的前端域名（比如https://your-domain.com），避免安全风险；
• Next.js的next.config.js中的CORS配置仅对Next.js自带的API路由生效，如果你用的是独立Express后端，需要在后端单独配置CORS。

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