React对接Express后端Passport实现SAML SSO登录跳转问题咨询

API 探路者

2026-10-5

核心问题说明

你用fetch发送POST请求触发登录的方式行不通，因为fetch会静默处理服务端返回的302重定向响应，不会触发浏览器全局页面跳转，自然无法打开SSO登录页。

解决方案

直接使用原生表单提交触发登录流程，同时调整后端SAML回调逻辑适配前后端分离架构，具体修改如下：

1. 前端代码修改

删除原有fetch提交逻辑，改为原生表单提交，即可正常触发浏览器跳转SSO登录页：

export class Login extends React.Component{
  constructor(props){
      super(props);
      this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e){
      e.preventDefault();
      // 可在此处添加登录loading等逻辑后提交表单
      document.getElementById('loginForm').submit();
  }

  render(){
      return (
          <div className="flex h-screen">
              <div className="container m-auto max-w-md w-full space-y-8">
                  <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
                     Sign in to your account
                   </h2>
                  <form 
                    className="space-y-6 p-8" 
                    action="http://localhost:3000/auth/login" 
                    method="post" 
                    onSubmit={this.handleSubmit} 
                    id="loginForm"
                  >
                      <div>
                         <button type="submit">
                           Sign in
                         </button>
                       </div>
                  </form>
              </div>
          </div>
      );
  }
}

2. 后端代码修改

新增SAML回调路由，处理IdP返回的认证信息、存储会话后重定向到React前端地址：

// 原有登录触发路由，删除固定的successRedirect，放在回调里处理
router.post('/login',
    passport.authenticate('saml', {
      failureRedirect: 'http://localhost:5173/login', // 认证失败跳回React登录页
    })
);

// 新增SAML回调路由，需和IdP平台配置的ACS地址完全一致
router.post('/saml/callback', 
  passport.authenticate('saml', { failureRedirect: 'http://localhost:5173/login' }),
  function(req, res) {
    // 此处Express会自动完成Passport会话存储、认证Cookie种植
    // 直接重定向到React前端首页，正式环境替换为你的前端域名
    res.redirect('http://localhost:5173');
  }
);

3. 你提到的三个问题的对应解决说明

SSO回调跳转失效问题：SAML回调是IdP直接向后端回调地址发送POST请求，全程和React前端无关，只要后端回调地址配置正确，就不会失效，服务端处理完成后再跳转到前端即可。
服务端处理跳转的要求：整个认证流程的跳转逻辑、会话存储、Cookie种植都是由Express完成，完全符合你的要求。
正式环境兼容性：只要将前后端地址、CORS配置、Cookie域名配置为正式环境的对应值，逻辑和本地完全一致，可以正常运行。

额外注意事项

如果前后端跨域，需要在Express中配置CORS允许credentials: true，后续React前端发接口请求时也要开启withCredentials: true携带Cookie。
正式环境如果前后端使用不同子域名，需要将Cookie的domain配置为根域名（例如.yourdomain.com），保证前后端都能正常读取认证Cookie。

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