React - Nodejs / express使用axios获取请求 - 无法从客户端点击我的后端路由 - 这是什么错误?

时间:2017-10-09 22:36:54

标签: javascript reactjs express httprequest nodes

我正在尝试从我的后端路由发出api请求(使用nodes / express)。从客户端站点,我正在制作axios请求并使用react。我测试了我的快速后端路由,它运行得很好,所以问题必须放在我的客户端代码中。我一直在看它一段时间而且不知道我做错了什么 - 任何帮助都会很棒!谢谢!

我的后端节点表达路线:

 router.get('/testing', function(req,res){
        sampleAPI.get('example/?origin=' + req.query.city + '&name=' + req.query.name + '&xxx=yes&yyy=no&xyx=maybe', function(err, data){
                  if (err){
                     res.status(200).send(err);
                  }
                  else{
                     res.status(200).send(data);
                  }
         })
 })

api请求:

     export function search (city, name) {
            return axios.get('api/testing', {
                params: {
                    city: city,
                    name:name
                }
     })

反应成分:

        import React from 'react';
        import {search} from '../api.js';
        class Searching extends React.Component {
            constructor(props){
                super(props);
                this.state={
                    city:'',
                    name:''
                }
                this.handleInput=this.handleInput.bind(this);
                this.testing=this.testing.bind(this);
            }
            testing(e){
                this.setState({
                    [e.target.name]:e.target.value
                })
            }

            handleInput(e){
                e.preventDefault();
                search(this.state.city, this.state.name)
            }
            render () {
                return (
                    <div>
                      <form onSubmit={this.handleInput}>
                         <input type="text" name="city"  value={this.state.city} onChange={this.testing} />
                         <input type="text"  name="name" value={this.state.name} onChange={this.testing}/>
                         <input type="submit" value="Submit" />
                       </form>
                    </div>
                 )
            }
        }

        export default Searching;

1 个答案:

答案 0 :(得分:0)

在您的axios请求中,您定位的是'api/testing'的端点。您定位的快速路由器路由为'/testing',因此您在该路由器文件中的某个位置将'/testing'端点嵌套在&#39; / api&#39;中。路线如router.use('/api', require('./api'));

此axios请求是否有效:

export function search (city, name) {
   return axios.get(`/api/testing/${city}/${name}`);
}

使用此终点:

router.get('/testing/:city/:name', function(req,res){
    sampleAPI.get('example/?origin=' + req.params.city + '&name=' + req.params.name + '&xxx=yes&yyy=no&xyx=maybe', function(err, data){
        if (err){
           res.status(200).send(err);
        }
        else {
           res.status(200).send(data);
        }
     })
}