Next.js使用next-connect跳转Twitter API出现CORS错误如何解决？

实现Twitter OAuth跳转登录时控制台报CORS错误，错误信息如下：

Access to fetch at 'https://api.twitter.com/oauth/authenticate?oauth_token=' (redirected from 'http://localhost:3000/api/auth/twitter/generate-auth-link') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

此前的解决方案为弹出新窗口完成跳转，现在需要在当前页面直接跳转，给本地接口添加了多套CORS配置后仍然报错。
预期的OAuth流程为：

在http://localhost:3000点击登录 → 跳转至Twitter授权页 → 授权后跳转回http://localhost:3000

你的CORS配置不生效是因为报错的主体是Twitter的官方OAuth接口，而非你自己的后端接口。你通过fetch请求本地的生成授权链接接口，接口返回302重定向后，fetch会自动跟进跳转请求Twitter的接口，而Twitter的接口不会给本地开发域名返回允许跨域的响应头，所以触发CORS报错。

你不需要用异步fetch请求这个授权接口，整页跳转不受CORS规则限制，用以下任意一种方案修改前端登录逻辑即可：

• 方案1：直接用超链接标签实现跳转，不需要额外JS逻辑

<a href="/api/auth/twitter/generate-auth-link">Twitter 登录</a>

• 方案2：如果需要在跳转前执行自定义逻辑（比如参数校验、行为埋点），用JS直接修改当前页面地址

const handleTwitterLogin = () => {
  // 可在此处添加跳转前的自定义逻辑
  window.location.href = '/api/auth/twitter/generate-auth-link'
}

修改后，后端返回的302重定向会直接引导整个页面跳转到Twitter授权页，不会触发CORS报错，授权完成后也会按你的现有逻辑跳转回本地站点，和你之前用next-auth的效果完全一致。

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