Question

因此，我使用axios将我的reactJS前端与Rails API后端链接。

这是我的路由器：

[...]
<Route path="/" component={LandingPage} exact={true}/>
<Route path="/meals" component={MealsPage} exact={true}/>
<Route exact path="/user/:token"
                      render={routeProps => (
                        <MyAccountPage {...routeProps} currentUser={this.state} />
                      )}
              />
[...]

这是我使用axios的功能：

getCurrentUser: jwt => {
    let config = {
      headers: {}
    }
    if (jwt) {
      config['headers']['Authorization'] = 'Bearer ' + jwt
    }
    return axios.get('api/v1/users/current', config)
      .then(response => {
        console.log(response)
        return response.data
      })
      .catch(error => {
        if( error.response ){
            console.log(error: error.response.data);
        }
        return undefined
      })
  }

它非常适合/和/meals路由。但是，当使用/user/:token调用axios时，它将尝试从/user/api/v1/users/current而不是/api/v1/users/current获取数据。

如何更改它以使其同时适用于开发和生产环境？

Answer 1

问题出在您的axios.get请求中的路径–因为它不是以斜杠开头，所以被认为是相对于当前文档路径的。

如果端点位于/api/v1/users/current，则应在请求中指定路径：

return axios.get('/api/v1/users/current', config)
  .then(...

当URL在ReactJS + Rails上具有动态参数时，axios使用错误的URL

1 个答案: