Svelte前端请求NestJS后端遇CORS问题，OAuth流程异常

• 场景：搭建Svelte前端验证NestJS后端的OAuth授权流程，后端通过OAuth处理授权，用户登录成功后返回会话Cookie
• 异常表现：使用Insomnia/Postman或直接在浏览器访问后端时，OAuth流程完全正常；但从Svelte前端发起请求时，既无法跳转到OAuth授权页面，请求还被CORS策略拦截
• 环境细节：NestJS与Svelte均已Docker化，通过Docker部署的Nginx作为反向代理统一域名；调整NestJS的CORS策略后无效，尝试过开启withCredentials的axios请求和fetch请求均失败，怀疑42 API的OAuth不支持XHR请求

核心原因 #

OAuth授权流程依赖浏览器的跳转行为完成服务商页面的交互，XHR/fetch这类异步请求无法触发浏览器跳转，同时跨域场景下的Cookie传递会被严格限制，这是问题的根本所在。

• 替换XHR请求为直接浏览器跳转
  把按钮点击逻辑改为直接跳转至后端授权接口，让浏览器完整处理OAuth的跳转流程，彻底规避XHR带来的限制：

  <button on:click={() => window.location.href = '/api/v2/auth'} class="w-100 btn btn-lg btn-primary">
      Connexion
  </button>
  

  由于使用了Nginx反向代理统一域名，直接使用相对路径即可避免跨域问题。

• 检查并修正Nginx反向代理配置
  确保前端页面与后端API完全共享同一域名，示例配置片段：

  server {
      listen 80;
      server_name your-domain.com;
  
      # 转发前端请求到Svelte容器
      location / {
          proxy_pass http://svelte-container:3000;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
      }
  
      # 转发后端API请求到NestJS容器
      location /api/ {
          proxy_pass http://transcendance:8080/api/;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          # 确保Cookie正常传递
          proxy_set_header Cookie $http_cookie;
          proxy_cookie_path / /;
      }
  }
  

• NestJS端CORS配置优化（可选）
  若仍需单独配置CORS，确保允许凭证传递并指定正确的源：

  // main.ts
  async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    app.enableCors({
      origin: 'https://your-domain.com', // 前端域名，同一域名下可设为true
      credentials: true,
      allowedHeaders: ['Content-Type', 'Authorization'],
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    });
    await app.listen(8080);
  }
  bootstrap();
  

• 调整后端授权成功后的跳转逻辑
  NestJS在OAuth授权成功后，应直接跳转回前端首页（如https://your-domain.com/），而非返回JSON数据，这样浏览器会携带会话Cookie回到前端，后续前端可通过接口验证用户状态。

<script lang="ts">
import {push} from 'svelte-spa-router';

// 页面加载时检查用户是否已登录
$: checkAuth = async () => {
    try {
        const response = await fetch('/api/v2/auth/check', {
            credentials: 'include',
        });
        if (response.ok) {
            push('/');
        }
    } catch (e) {
        // 用户未登录，保持显示登录按钮
    }
};

checkAuth();
</script>

<main class="form-signin w-100 m-auto">
    <button on:click={() => window.location.href = '/api/v2/auth'} class="w-100 btn btn-lg btn-primary">
        Connexion
    </button>
</main>

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