Next.js前后端分离时NextAuth signIn跨域配置问题

NEXTAUTH_URL环境变量完全可以解决你遇到的这个问题，具体配置和注意事项如下：

• 核心配置：在客户端项目中设置NEXTAUTH_URL为服务端的Auth API根地址，也就是http://localhost:3000/api/auth。NextAuth的客户端方法（比如signIn()）会自动使用这个地址发起请求，不再指向客户端自身的域名。

• 环境变量设置方式：
  开发环境下，直接在客户端项目的.env.local文件中添加：

  NEXTAUTH_URL=http://localhost:3000/api/auth
  

  生产环境则对应设置为服务端正式环境的Auth API地址。

• 必须的服务端CORS配置：
  因为客户端和服务端是跨域的，服务端必须允许客户端域名的请求。可以在服务端项目的next.config.js中添加CORS规则：

  module.exports = {
    async headers() {
      return [
        {
          source: '/api/auth/:path*',
          headers: [
            { key: 'Access-Control-Allow-Credentials', value: 'true' },
            { key: 'Access-Control-Allow-Origin', value: 'http://localhost:3010' },
            { 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' },
          ],
        },
      ];
    },
  };
  

• 额外优化点：
  调用signIn()时，显式指定callbackUrl参数，确保登录成功后跳回客户端的目标页面，示例：

  signIn('credentials', {
    // 你的账号密码等登录参数
    callbackUrl: 'http://localhost:3010/dashboard'
  })
  

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