在 React Js 中使用 Express 进行代理 Api 调用

Question

我正在从我的 react 应用程序中使用 api 的 fetch 方法。现在我想创建快速应用程序并从快速服务器路由这个 api 调用。 这部分 api 已修复：https://api.imgur.com/3/gallery/ 其余是用户选择的值。然后我创建这样的网址https://api.imgur.com/3/gallery/${section}/${sort}/${window}/${page}?showViral=${viral} 我根据用户选择以相同的方式使用 ${{section}} 和其他方式获取部分、排序、窗口、页面、病毒值传递，但默认情况下，如果用户没有从 UI 中选择任何一个过滤器，则分配每个参数。 .

现在我想要 https://api.imgur.com/3/gallery/ 快递并从下面的方法发送 /${section}/${sort}/${window}/${page}?showViral=${viral} 来表达和接收回复。

我在我的 react 应用中安装了 express。休息一下，我是新手，所以我无法配置。

这个 loadImage 方法在 react 组件中。 `

 createURL ()
{
 const { lastSection, lastSorting, lastWindow, page, viral } = this.state;
let url = `https://api.imgur.com/3/gallery/${section}/${sort}/${window}/${page}?showViral=${viral}`;

    this.loadImages(url);
}
    loadImages(iUrl) {
        let myHeaders = new Headers();
        myHeaders.append("Authorization", "Client-ID {{myid}}");

        let requestOptions = {
          method: "GET",
          headers: myHeaders,
          redirect: "follow"
        };
        fetch(iUrl, requestOptions)
          .then((res) => res.json())
          .then((json) =>
            this.setState({ dataList: json.data, loaded: true, showLoader: false })
          )
          .catch((error) => {
            console.log(error);
          });
      }

Answer 1

您希望从 Express API 端点发送图像URL，而不是通过传递参数来构造它。那么，您需要做的就是：

对于URLSearchParams，可以参考this link

createURL ()
{
    const { lastSection, lastSorting, lastWindow, page, viral } = this.state;
    let url = `/getImageURLS`;

    this.loadImages(url, { lastSection, lastSorting, lastWindow, page, viral });
}
    loadImages(iUrl, params) {
        let URL = new URL(iUrl);
        URL.search = new URLSearchParams(params).toString();

        let myHeaders = new Headers();
        myHeaders.append("Authorization", "Client-ID {{myid}}");

        let requestOptions = {
          method: "GET",
          headers: myHeaders,
          redirect: "follow"
        };
        fetch(URL, requestOptions)
          .then((res) => res.json())
          .then((json) =>
            this.setState({ dataList: json.data, loaded: true, showLoader: false })
          )
          .catch((error) => {
            console.log(error);
          });
      }

Express API 端点：

let express = require('express');
let router = express.Router();
let app = express();
app.use('/', router);
app.listen('8080', () => console.log('listening on 8080'));
router.get('/getImageURLS', (req, res) => {
    console.log(req.query); //shows query paramters sent

    // your logic 

    const obj = [];
    res.send(obj); // image url array to be sent
});