OKTA重定向失效问题：React路由在Apache部署后异常

核心原因 #

React是单页应用（SPA），前端路由由React Router处理，但Apache默认会把所有路径请求当作静态资源查找，当访问/tmbo/login/callback这类不存在的物理文件路径时，就会返回404。

解决方案步骤 #

1. 启用Apache的mod_rewrite模块 #

• 打开Apache的httpd.conf配置文件，找到以下行，去掉前面的注释（#）：

  LoadModule rewrite_module modules/mod_rewrite.so
  

• 重启Apache服务使配置生效。

2. 添加.htaccess重写规则 #

在你的Apache部署目录（即tmbo文件夹所在的目录）下创建.htaccess文件，写入以下内容：

RewriteEngine On
# 仅当请求的文件/目录不存在时才重写
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 将所有请求重定向到index.html，交给React Router处理
RewriteRule ^ index.html [L]

3. 允许Apache读取.htaccess配置 #

修改Apache的httpd.conf或虚拟主机配置文件，确保部署目录的AllowOverride设置为All：

<Directory "/path/to/your/apache/deployment/folder/tmbo">
    AllowOverride All
    Require all granted
</Directory>

替换/path/to/your/apache/deployment/folder/tmbo为你实际的部署路径，之后重启Apache。

4. 配置React应用的base路径 #

在React项目的package.json中添加homepage字段，指定部署的子路径：

"homepage": "/tmbo/"

重新执行npm run build生成新的dist文件，再部署到Apache。

5. 验证前端路由与Okta配置 #

• 检查React Router的路由配置，确保/tmbo/login/callback路由正确注册：

  import { LoginCallback } from '@okta/okta-react';
  import { Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Routes>
        {/* 其他路由 */}
        <Route path="/tmbo/login/callback" element={<LoginCallback />} />
      </Routes>
    );
  }
  

• 确认Okta应用的登录重定向URI已添加http://localhost:8080/tmbo/login/callback，并且OktaAuth实例中的redirectUri配置为动态获取：

  const oktaAuth = new OktaAuth({
    issuer: '你的Okta issuer地址',
    clientId: '你的客户端ID',
    redirectUri: `${window.location.origin}/tmbo/login/callback`,
    scopes: ['openid', 'profile', 'email'],
  });
  

内容的提问来源于stack exchange，提问作者Lalit Singh Rana