首页 > 解决方案 > Axios 和 App 对外部 api 的 GET/POST 请求

问题描述

我是 axios 和 nodejs/express 的新手。Axios 调用是从 React 组件文件本身进行的,我决定将它们移动到一个名为“user.service.js”的文件中以学习最佳实践。但是,它们并没有按照我期望的方式工作。以下是两种情况。

对于 GET 请求,这是有效的:user.service.js:

class UserService {
    getDevices() {
        return axios.get(process.env.REACT_APP_SERVICE + "/userDevices", {
            params: {
                access_token: user.access_token,
              }
        });
    }
}
export default new UserService();

server.js:

app.get('/userDevices', (req, res) => {
    console.log("grabbing user list of available devices");

    axios.get(api_url + "/api/devices", {
        headers: 
        { 'Authorization': 'Bearer ' + req.query.access_token }
    }
    ).then((response) => {
        res.send({ devices: response.data });
    }).catch((err) => {
        console.log('failed to grab user devices');
        res.send('error');
    });
});

但这(更改 user.service.js 中的 getDevices 函数和 server.js 中的标头)没有:user.service.js:

    getDevices() {
        return axios.get(process.env.REACT_APP_SERVICE + "/userDevices", {
            headers: {
                authorization: 'Bearer +' user.access_token,
              }
        });
    }

server.js:

app.get('/userDevices', (req, res) => {
    console.log("grabbing user list of available devices");

    axios.get(api_url + "/api/devices", {
        headers: req.headers.authorization
    }
    ).then((response) => {
        res.send({ devices: response.data });
    }).catch((err) => {
        console.log('failed to grab user devices');
        res.send('error');
    });
});

对于 POST 请求,这根本不起作用:user.service.js:

class UserService()
{
    addDevice(eid, deviceType, configGroup, name, ip, tenantID) {
        return axios.post(process.env.REACT_APP_SERVICE + "/addDevice", {
            params :{
                eid: eid,
                deviceType: deviceType,
                configGroup: configGroup, 
                name: name,
                ip: ip, 
                tenantID: tenantID,
                access_token: user.access_token
            }
        });
    }
}
export default new UserService();

server.js:

app.post('/addDevice', (req, res) => {
    console.log('Adding new device');
   
    const device = [{
        "eid": req.body.eid,
        "fields": {
            "deviceType": req.body.deviceType,
            "configGroup": req.body.configGroup,
            "field:name": req.body.name,
            "field:ip": req.body.ip
        }
    }];
 
    axios.post(api_url + "/api/devices", device, {
        headers: {
            "Authorization": 'Bearer ' + req.query.access_token,
            "X-Tenant-ID": req.body.tenantID,
            "Content-Type": "application/json"        
        }
    }).then((response) => {
        res.send({ status: response.data.message });
    }).catch((err) => {
        console.log('failed to add device', err);
        res.send({ status: 'error' });
    });
});

打印“req.body.tenantID”是未定义的。我在我的 React 组件中创建了这个类的一个新实例,其他函数也可以工作。我怀疑我对“req.body”的调用不正确,但我现在不知所措。提前致谢。

标签: javascriptnode.jsreactjsexpressaxios

解决方案


推荐阅读