React TypeScript项目推送index.html至Git时遇RPC 302错误

问题现象 #

React TypeScript项目推送index.html到Git仓库时，直接报错：

Git: RPC failed; HTTP 302 curl 22 The requested URL returned error: 302

反复测试发现明确规律：

• 删掉<head>里定义orbital的内联<script>，推送就能成功完成
• 加回这段脚本，推送立刻触发302错误

涉及代码 #

index.html关键片段 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 其他meta、link标签省略 -->
        <title>%REACT_APP_PRODUCT_NAME%</title>
        <!-- 导致问题的核心脚本 -->
        <script>
            (function(o,r,b,i,t,a,l){
                o[r]||(t=o[r]=function(){i.push(arguments)},t._t=new Date,t._v=1,i=t._q=[])
                })(window,'orbital');
        </script>
        <script src="https://client.useorbital.com/api/account/EM3RY6uKy2j7/client.js" async></script>
    </head>
    <!-- body部分省略 -->
</html>

关联组件代码（AddCreditGroupDialog.tsx） #

import {
    Dialog,
    DialogTitle,
    IconButton,
    DialogContent,
    DialogActions,
    FormGroup,
} from '@material-ui/core';
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { joiResolver } from '@hookform/resolvers/joi';
import { creditLimitTypes } from '../../config/common.constants';
import TextField from '../common/TextField';
import Select from '../common/Select';
import FormHelperText from '../common/FormHelperText';
import FormLabel from '../common/FormLabel';
import TextButton from '../common/TextButton';
import { CreditGroupDetail, CreditLimitType, CreditPlan } from '../../types';
import { creditGroupSchema } from '../../validation/credit-group-schema';

export interface AddCreditGroupDialogProps {
    open: boolean;
    onClose: () => void;
    onSave: (data: CreditGroupDetail) => void;
    creditPlans: CreditPlan[];
}

const AddCreditGroupDialog: React.FC<AddCreditGroupDialogProps> = ({
    open,
    onClose,
    onSave,
    creditPlans,
}) => {
    const [creditPlan, setCreditPlan] = useState<CreditPlan | null>(null);
    const [creditMinLimitType, setCreditMinLimitType] = useState<CreditLimitType | null>(null);
    const { register, errors, handleSubmit } = useForm<CreditGroupDetail>({
        defaultValues: {
            name: '',
            creditPlanId: '',
            minsType: '',
            billingCode: '',
            status: 'active',
        },
        mode: 'onSubmit',
        resolver: joiResolver(creditGroupSchema),
    });

    const handleCreditGroupSubmit = handleSubmit((data) => {
        onSave({ ...data, status: 'active' });
    });

    return (
        <Dialog
            id="view-customer-group-dialog"
            fullWidth
            maxWidth="md"
            disableBackdropClick
            disableEscapeKeyDown
            open={open}
            onClose={onClose}
        >
            <DialogTitle id="view-customer-credit-group-dialog-title">
                Create Credit Group
                <IconButton
                    id="view-customer-credit-group-dialog-icon-btn"
                    onClick={onClose}
                    style={{ float: 'right' }}
                >
                    <i className="material-icons">close</i>
                </IconButton>
            </DialogTitle>
            <DialogContent id="view-customer-credit-group-dialog-content">
                <form name="creditGroupForm" onSubmit={handleCreditGroupSubmit}>
                    <TextField
                        label="Name"
                        fullWidth
                        name="name"
                        inputRef={register}
                        error={!!errors.name}
                        helperText={errors.name?.message}
                        required
                    />
                    <FormGroup>
                        <FormLabel>Credit Plan*</FormLabel>
                        <Select
                            options={creditPlans}
                            value={creditPlan}
                            getOptionLabel={(option) => option.name}
                            getOptionValue={(option) => option.id}
                            name="creditPlanId"
                            inputRef={register}
                            onChange={setCreditPlan}
                        />
                        <FormHelperText>{errors.creditPlanId?.message}</FormHelperText>
                    </FormGroup>
                    <FormGroup>
                        <FormLabel>Credit Limit Type*</FormLabel>
                        <Select
                            options={creditLimitTypes}
                            value={creditMinLimitType}
                            getOptionLabel={(option) => option.name}
                            getOptionValue={(option) => option.value}
                            name="minsType"
                            inputRef={register}
                            onChange={setCreditMinLimitType}
                        />
                        <FormHelperText>{errors.minsType?.message}</FormHelperText>
                    </FormGroup>

                    <FormGroup>
                        <FormLabel>Billing Code</FormLabel>
                        <TextField name="billingCode" fullWidth inputRef={register} />
                    </FormGroup>
                    <DialogActions id="view-customer-credit-group-dialog-actions">
                        <TextButton
                            id="view-customer-credit-group-close-btn"
                            onClick={onClose}
                            color="primary"
                        >
                            Close
                        </TextButton>
                        <TextButton
                            id="view-customer-credit-group-create-btn"
                            type="submit"
                            color="primary"
                        >
                            Create
                        </TextButton>
                    </DialogActions>
                </form>
            </DialogContent>
        </Dialog>
    );
};

export default AddCreditGroupDialog;

排查方向与解决办法 #

核心原因推测 #

HTTP 302是重定向状态码，这里仅与特定脚本绑定，大概率是两种情况：

1. Git客户端解析这段内联脚本时，误将某些字符识别为URL跳转规则，导致请求被错误重定向
2. Git托管服务（如GitHub/GitLab）的安全扫描将这段脚本误判为恶意内容，触发了重定向拦截

具体解决办法 #

办法1：将脚本移到React组件中执行（推荐）

把index.html里的orbital初始化逻辑迁移到根组件的useEffect中，避免直接写在index.html里：

// 示例：在App.tsx中实现
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 初始化orbital函数
    (function(o,r,b,i,t,a,l){
      o[r]||(t=o[r]=function(){i.push(arguments)},t._t=new Date,t._v=1,i=t._q=[])
    })(window,'orbital');
    // 动态加载外部client.js脚本
    const script = document.createElement('script');
    script.src = 'https://client.useorbital.com/api/account/EM3RY6uKy2j7/client.js';
    script.async = true;
    document.head.appendChild(script);

    // 组件卸载时清理脚本
    return () => {
      if (document.head.contains(script)) {
        document.head.removeChild(script);
      }
    };
  }, []);

  // 其他组件渲染逻辑
  return <div id="root">{/* ... */}</div>;
}

export default App;

之后删除index.html中对应的两段<script>标签，既保留原有功能，又不会触发Git的异常解析。

办法2：检查并修正Git远程URL

确认本地仓库的远程URL是否正确，避免URL本身存在重定向：

# 查看当前远程地址
git remote -v
# 如果地址有误，替换为正确的仓库URL
git remote set-url origin <你的仓库正确URL>

办法3：重置Git的HTTP相关配置

如果是代理或缓存导致的重定向问题，尝试重置Git的HTTP设置：

# 禁用HTTP缓存
git config --global http.cache false
# 清空代理配置（若之前设置过）
git config --global --unset http.proxy
git config --global --unset https.proxy

办法4：强制推送文件

如果确认脚本安全，仅为托管服务误判，可以强制添加后推送：

git add --force public/index.html
git commit -m "添加orbital初始化脚本"
git push

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