首页 > 解决方案 > 405 状态 Ngnix React

问题描述

从我的反应应用程序向我的烧瓶 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/ 都没有运气。任何指导表示赞赏

编辑:可能值得注意的是 /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"

标签: reactjsnginxreact-router

解决方案


推荐阅读