从我的react应用向我的flask API发出POST请求时,我得到405状态代码。我将其范围缩小到Nginx,因为我能够在服务器上成功卷曲路由。
从我的研究中,我得到了405状态代码,因为Nginx认为它应该提供静态内容,但是我不明白为什么会这样。
让我更困惑的是,我在某些端点上只得到405状态代码,而在其他端点上却没有。
烧瓶:工作路线
@users_blueprint.route('/auth/login', methods=['POST'])
@users_blueprint.route('/classes/list', methods=['POST'])
@users_blueprint.route('/classes/add', methods=['POST'])
烧瓶:问题解决方法
@users_blueprint.route('/auth/register', methods=['POST'])
@users_blueprint.route('/schedule/add', methods=['POST'])
@users_blueprint.route('/schedule/add', methods=['POST'])
反应App.js
class App extends Component {
render() {
return (
<Switch>
<Route exact path='/login' component={Login}/>
<Route exact path='/register' component={Register}/>
<PrivateRoute
path='/'
component={Main}
/>
</Switch>
);
}
}
反应Main.js
...
...
render() {
const { classes, theme } = this.props;
return (
<div className={classes.root}>
<CssBaseline />
<Nav mobileOpen={this.state.mobileOpen} handleDrawerToggle={this.handleDrawerToggle}/>
<MenuBar menuText={this.state.menuTitle} handleDrawerToggle={this.handleDrawerToggle}/>
<main className={classes.content}>
<Switch>
<Route exact path='/clients/list' render={(props) => <ClientList {...props} setMenu={this.setMenu} />} />
<Route exact path='/clients/add' render={(props) => <ClientView {...props} setMenu={this.setMenu} />}/>
<Route exact path='/classes/add' render={(props) => <Classes {...props} setMenu={this.setMenu} />} />
<Route exact path='/classes/list' render={(props) => <ClassList {...props} setMenu={this.setMenu} />} />
<Route exact path='/schedule/list/:id' render={(props) => <ClassSchedule {...props} setMenu={this.setMenu} />} />
<Route exact path='/schedule/add/:id'render={(props) => <AddSchedule {...props} setMenu={this.setMenu} />} />
<Route exact path='/events/list/:id' render={(props) => <EventsList {...props} setMenu={this.setMenu} />} />
</Switch>
</main>
</div>
);
}
Ngnix默认值
server {
listen 80;
root /var/www/fpt/build;
server_name blahblah.compute-1.amazonaws.com;
index index.html index.htm;
location / {
proxy_pass http://localhost:5000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Client-Verify SUCCESS;
proxy_set_header X-Client-DN $ssl_client_s_dn;
proxy_set_header X-SSL-Subject $ssl_client_s_dn;
proxy_set_header X-SSL-Issuer $ssl_client_i_dn;
}
}
我在nginx配置中尝试了许多不同的模式,例如两个服务器块在不同的端口上侦听,并在端点上加上/ api /作为前缀,但都没有运气。任何指导表示赞赏
edit:可能值得注意的是/ schedule / react路由位于子组件中
日志示例:
xxx.xxx.x.xx - - [10/Jan/2019:03:46:59 +0000] "GET /register HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
xxx.xxx.x.xx - - [10/Jan/2019:03:47:00 +0000] "GET /favicon.ico HTTP/1.1" 200 3870 "blahblahblah.compute-1.amazonaws.com/register" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
xxx.xxx.x.xx - - [10/Jan/2019:03:47:04 +0000] "POST /auth/register HTTP/1.1" 405 584 "blahblha.compute-1.amazonaws.com/register" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"