Question

我有一个简单的nginx服务器，具有：

一个Grafana实例
琐碎的AuthProxy资源
与React反应路由器

这是我们nginx.conf

的相关部分

server {
listen 443 ssl;
server_name _;
ssl on;

ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/website.com/privkey.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
location /grafana/ {

    rewrite  ^/grafana/(.*)  /$1 break;

    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   Host      $http_host;

    set $grafanauser 'v4z6hy1rnqbbz6rj4u6rj15bt6nz1nbva';

    if ($remote_addr ~* ::1) {
        set $grafanauser $arg_user;
    }

    proxy_set_header X-WEBAUTH-USER $grafanauser;
    proxy_pass      http://127.0.0.1:3000;
}

location /authproxy/ {
    default_type text/plain;
    return 200 "$remote_addr\n";
}

  location / {
     proxy_pass      http://anotherwebsite.com;
}
}

这是来自anotherwebsite.com的相关React代码：

class App extends Component {

componentDidMount() {
    this.props.authFromCache();
}

render() {

    let routes = (
        <Switch>
            <Route path="/login" component={Login} />
            <Route path="/reset-password" component={ResetPwd} />
            <Route path="/submit-new-password" component={SubmitPwd} />
            <Redirect to="/login" />
        </Switch>
    );

    if(this.props.isAuth){
        routes = (
            <Switch>
                <Route path="/logout" component={Logout} />
                <Route path="/" exact component={Dashboard} />
                <Redirect to="/" />
            </Switch>
        );
    }

    return (
        <div className="container pt-4">
            {routes}
        </div>
    );
}
}

我遇到的问题是，如果我去https://website.com/grafana/和https://website.com/authproxy/，则看不到Grafana和AuthProxy。但是，如果我对此发表评论：

location / {
 proxy_pass      http://anotherwebsite.com;
}

我可以毫无问题地访问/ grafana /和/ authproxy /。我认为这是由于React的路由方法存在干扰。然后，我想做的是：如何在/上启用react应用程序，并同时允许在/ grafana上访问Grafana和在/ authproxy /上访问AuthProxy？

谢谢

React Router和Nginx问题

0 个答案: