reactjs - React 开发服务器不代理表单提交
问题描述
我使用 create-react-app 创建了一个反应应用程序,并且我的代理在使用 axios 发送请求时工作正常。
我想做一个“正常”的表单提交(没有使用 axios 的 onsubmit 功能)。我想这样做是因为我的 Node.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>
}
这是我的代理配置在 package.json 中的样子
"proxy": "https://localhost:8080/"
解决方案
由于您正在转向前端路由,我建议您集成react-router
(我更喜欢 v3.0.4 而不是 v4.x)仅用于处理前端路由和express
(或您正在使用的任何东西)用于处理后端 API 请求只要。
以下示例仅用于路由演示目的,不应按原样使用。
首先,在客户端设置一个代理package.json
(这样做的主要优点是避免使用CORS
):
"proxy": {
"/api/*": {
"target": "http://localhost:8080"
}
}
我的客户routes
将被设置为始终保持安装状态并充当路由App
的传递:children
客户端/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>
);
在我的App.js
中,我可以使用isAuthenticated
状态检查:
客户端/src/components/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 ,然后重定向到:this.props.authenticated
AJAX
dashboard
客户端/src/components/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>
)
}
然后快递服务器routes
会寻找POST
请求:
服务器/路由/auth.js
const { login } = require('../controllers/auth.js');
app.post('/login', login);
然后,我可以passport
在我的 express 控制器中对用户进行身份验证(如果用户未能通过身份验证,那么它将被 AJAX.catch()
内部捕获handleSubmit
):
服务器/控制器/auth.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)
推荐阅读
- go - 接口返回运行时错误:无效的内存地址或 nil 指针取消引用
- javascript - 可以在 Javascript 端接收主机对象事件吗?
- python - 如何使随机梯度回归器运行多达 1000 个 epoch 或产生更好的结果?
- python - 如何使用字符串格式处理不平衡括号
- r - 通过在R中导入选定列的公共列组合dfs
- security - Azure 存储防御者
- amazon-web-services - 由于身份验证,AWS ECR 推送在 Azure Devops 上失败
- node.js - 使用在 Web 应用上创建的 WebAuthn 密钥的 Electron 应用中的使用问题
- ios - didSet 不观察静态变量
- android - 升级原生移动应用程序以有力地颤动