是否有一种方法来传输客户端响应状态/道具来完成后端表达式(api调用)？

Question

我首先创建了一个在客户端进行api调用的react应用程序，因为它公开了API键，这是一个很大的否定。因此，我必须创建一个后端快速服务器来进行api调用。然而，在客户端，我的react应用程序允许您输入一个随机用户名(这会改变状态)，以便进行api调用并获取用户信息。是否有方法将状态/道具从客户端传输到后端速递以完成api调用？

以下是特快专递代码：

const express = require('express');
const app = express();
const fetch = require('node-fetch');

app.get('/api/customers', (req, res) => {

    fetch('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/huhi?api_key=<MY_API_KEY>')
    .then(res => res.json())
    .then(result => res.json(result));
});

const port = 5000;

app.listen(port, () => console.log(`Server started on port ${port}`))

在本节中，fetch('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/huhi?api_key=<MY_API_KEY>')是否有一种方法可以在“by-name/”之后将用户名更改为reginald、doublelift、faker等(存储在客户端的react状态中)。

示例

获取(‘https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/reginald?api_key=’)

或

获取(‘https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/doublelift?api_key=’)

或

获取(‘https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/faker?api_key=’)

Answer 1

其中一个解决办法是-

后端/Api端点上的

1. -

    // ...    
    app.get("/api/customers/:userId", (req, res)=>{
           fetch(`https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${req.params.userId}?api_key=<MY_API_KEY>`)
        .then(res => res.json())
        .then(result => res.json(result));
    })
    //...

1. 在客户端提交用户名通过输入或用户名称状态更改调用api点，即.-

fetch(`/api/customers/${this.state.username}`).then(users => this.setState(users))

Answer 2

这取决于如何将用户名发送到API，以及您在express应用程序中设置的正文解析中间件。

fetch(`uri/by-name/${req.params.username}`)
// OR
fetch(`uri/by-name/${req.query.username}`)
// OR
fetch(`uri/by-name/${req.body.username}`)