javascript - 同构React应用程序-当JS关闭时如何处理表单提交

Question

我有一个同构应用程序，它使用 redux-form 呈现登录表单，并允许用户输入用户名和密码。

这一切在客户端工作正常，但如果我关闭 JS，我似乎无法从表单获取值并通过 API 进行处理。

注意:当表单为 GET 时，值在 url 中显示为查询参数，但显然不想显示敏感数据。

class SignIn extends Component {

    static propTypes = {
        errorMessage: PropTypes.string,
        handleSubmit: PropTypes.func,
        signinUser: PropTypes.func
    }

    statics = {
        fields: [
            {
                name: 'email',
                label: 'Email'
            },
            {
                name: 'password',
                label: 'Password',
                type: 'password'
            }
        ]
    }

    handleFormSubmit({ email, password }) {
        this.props.signinUser({ email, password });
    }

    // renders an alert if field has an error
    renderAlert() {
        if (this.props.errorMessage) {
            return (
                <div className='alert alert-danger'>
                    <strong>Oops!</strong> {this.props.errorMessage}
                </div>
            );
        }

        return false;
    }

    // render the field
    renderField = ({ input, label, name, type, meta: { touched, error }, ...rest }) => (
        <div>
            <label htmlFor={name}>{label}</label>
            <div>
                <input {...input} {...rest} id={name} placeholder={label} type={type} />
                {touched && error && <span className='error'>{error}</span>}
            </div>
        </div>
    );

    render() {
        const { handleSubmit } = this.props;

        return (
            <form method='post' onSubmit={handleSubmit((data) => this.handleFormSubmit(data))}>
                {
                    this.statics.fields.map((field, index) =>
                        <fieldset className='form-group' key={index}>
                            <Field
                                className='form-control'
                                component={this.renderField}
                                label={field.label}
                                name={field.name}
                                type={field.type || 'text'}
                            />
                        </fieldset>
                    )
                }
                {this.renderAlert()}
                <button action='submit' className='btn btn-primary'>Sign in</button>
            </form>
        );
    }
}

和路线:

<Route path='/' component={App}>
    <IndexRoute component={Welcome} />
    <Route path='/feature' onEnter={requireAuth} component={Feature} />
    <Route path='/signin' component={Signin} />
    <Route path='/signout' component={Signout} />
    <Route path='/signup' component={Signup} />
</Route>

Answer 1

这就是 https 的用途:)

包含表单的页面应该位于 https 上，并且应该 POST 到 https 端点。

如果您有编写良好的通用代码，并且页面在服务器上呈现表单(并且所有 JS 所做的都是增强页面)，那么通过 https 发布表单应该没问题。