React dev服务器不代理表单提交

Question

我使用create-react-app创建了一个react-app，当使用axios发送请求时，我的代理可以正常工作。

我想做的是“正常”表单提交（axios没有onsubmit函数）。我想这样做是因为我的节点。然后js服务器将重定向我（axios不会将用户/浏览器发送到重定向，只会跟踪请求，这是我不想要的）

当我的表单提交时，它只是进入我的开发服务器localhost:3000/login而不是我的节点服务器localhost:8080/login，我相信这是因为

开发服务器将只尝试向代理发送其Accept标头中不包含text/html的请求。

来源

我看到我提交的表单中的请求确实有这个标题，这可能就是它忽略它的原因。

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

是否有一种方法可以执行“普通”表单提交，该表单提交代理到我的节点服务器而不是开发服务器？

我认为这会在生产环境中起作用，因为它都在同一台服务器上运行，所以我在想为什么它会在生产环境中起作用，但在开发环境中不可能？

这是我的表格

render() {
    return <div>
        <Form action='/login' className="some-class">
            <Button type="submit" className="some-class">
                Log In
            </Button>
        </Form>
    </div>
}

下面是我的代理配置在包中的样子。json

"proxy": "https://localhost:8080/"

Answer 1

由于您正在进入前端路由，我建议集成react-router（我更喜欢v3.0.4而不是v4.x）仅用于处理前端路由，而express（或您正在使用的任何东西）仅用于处理后端API请求。

以下示例仅用于路由演示目的，不应按原样使用。

首先，在客户端的包中设置一个代理。json（这样做的主要优点是避免使用CORS）：

"proxy": {
  "/api/*": {
    "target": "http://localhost:8080"
  }
}

我的客户端路由将被设置为使App始终保持挂载状态，并充当子路由的通行证：

client/src/routes/index。js

import React from 'react';
import { Route } from 'react-router';
import App from '../components/App';
import Dashboard from '../components/Dashboard';
import NotFound from '../components/NotFound';

export default (
  <Route path="/" component={App}>
    <Route path="dashboard" component={Dashboard} />
    <Route path="*" component={NotFound} />
  </Route>
);

在我的应用程序中。js，我可以使用isAuthenticated状态检查：

客户端/src/组件/App.js

import React, { Component, Fragment } from 'react';
import { browserHistory } from 'react-router';
import LoginForm from './LoginForm'

export default class App extends Component {
    state = { isAuthenticated: false };

    componentDidMount = () => !this.state.isAuthenticated && browserHistory.push('/')

    componentDidUpdate = (prevProps, prevState) => !this.state.isAuthenticated && browserHistory.push('/')

    authenticated = () => this.setState({ isAuthenticated: true }, () => browserHistory.push('/dashboard'))

    render = () => (
       !this.state.isAuthenticated
          ? <LoginForm authenticated={this.authenticated} />
          : <Fragment>
             {this.props.children}
            </Fragment>
    )
}

然后，在LoginForm组件中，我可以通过将isAuthenticated设置为true。道具。在成功的AJAX请求后进行身份验证，然后重定向到仪表板：

客户端/src/组件/LoginForm.js

import React, {Component} from 'react';
import axios from 'axios';

export default class LoginForm extends Component {
  state = {
    login: "",
    password: ""
  }

  handleChange = e => this.setState({ [e.target.name]: e.target.value })

  handleSubmit = e => {
    e.preventDefault();

    const { login, password } = this.state;
    if (!login || !password ) return;

    axios.post('/api/login', { login, password })
      .then(() => this.props.authenticated())
      .catch(err => console.error(err.toString()))
  }

  render = () => (
    <form onSubmit={this.handleSubmit} className="some-class">
      <input 
        name="login"
        type="text" 
        value={this.state.login} 
        placeholder="Username" 
        onChange={this.handleChange}
      />
      <input 
        name="password"
        type="password" 
        value={this.state.password} 
        placeholder="Password" 
        onChange={this.handleChange}
      />
      <button type="submit" className="some-class">
        Log In
      </button>
    </form>
  )
}

然后，快速服务器将查找POST请求：

服务器/路由/身份验证。js

const { login } = require('../controllers/auth.js');

app.post('/login', login);

然后，我可以在我的express控制器中通过passport对用户进行身份验证（如果用户身份验证失败，那么它将在AJAX.catch（）中被捕获handleSubmit）：

服务器/控制器/身份验证。js

exports.login = (req, res, done) => passport.authenticate('local-login', (err, user) => {
                  if (err || !user) { res.status(404).json({ err: "Authentication failed." }); done(); }

                  res.status(201).send(null);
                })(req, res, done)