405状态Ngnix反应

时间:2019-01-10 02:15:02

标签: reactjs nginx react-router

从我的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"

0 个答案:

没有答案