Nuxt代理外部API时干扰Google登录问题求助

核心原因 #

通过Nuxt代理访问Google登录接口时，Google登录页面的资源、跳转链接被错误解析为Nuxt域名（localhost:3000），而非Google官方域名，导致资源加载失败、跳转逻辑异常。

解决方案 #

1. 前端直接跳转后端认证接口（推荐） #

放弃通过Nuxt代理中转Google登录请求，让前端直接跳转到后端的认证地址：

• 在Nuxt的登录组件中，直接使用后端的Google认证URL：

  <template>
    <button @click="handleGoogleLogin">Google登录</button>
  </template>
  
  <script setup>
  const handleGoogleLogin = () => {
    window.location.href = 'https://localhost:7132/api/auth/google';
  }
  </script>
  

• 优势：完全绕开Nuxt代理的路径干扰，遵循OAuth2原生流程，由后端直接处理Google认证跳转、回调，流程更可靠。

2. 配置后端回调与跨域Cookie #

确保ASP.NET Core后端支持跨域场景下的认证：

• Google OAuth回调地址配置：在Program.cs中，将Google认证的回调地址设置为后端自身地址，而非Nuxt地址：

  builder.Services.AddAuthentication()
      .AddGoogle(options =>
      {
          options.ClientId = "你的Google ClientId";
          options.ClientSecret = "你的Google ClientSecret";
          options.CallbackPath = "/api/auth/google-callback";
      });
  

• 跨域与Cookie配置：启用CORS并配置Cookie跨域共享：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("NuxtCors", policy =>
      {
          policy.WithOrigins("https://localhost:3000")
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials(); // 允许携带Cookie
      });
  });
  
  // 配置Cookie跨域规则
  builder.Services.Configure<CookiePolicyOptions>(options =>
  {
      options.MinimumSameSitePolicy = SameSiteMode.None;
      options.Secure = CookieSecurePolicy.Always; // 跨域Cookie要求站点启用HTTPS
  });
  

3. 后端认证完成后跳转回Nuxt #

在后端处理Google认证回调的逻辑中，完成JWT Cookie设置后，跳转到Nuxt指定页面（如首页或用户中心）：

[AllowAnonymous]
[Route("api/auth/google-callback")]
public async Task<IActionResult> GoogleCallback()
{
    // 执行认证逻辑、设置JWT Cookie...

    // 跳转回Nuxt应用
    return Redirect("https://localhost:3000");
}

注意事项 #

• 必须启用HTTPS：跨域场景下SameSite=None的Cookie要求站点使用HTTPS，本地开发需为ASP.NET Core和Nuxt配置HTTPS。
• 禁止代理Google资源路径：不要让Nuxt代理Google登录页面的资源路径，否则会继续出现路径篡改问题。

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