nodejs做中间层请求后台接口-简单版

需求

前端使用nodejs做中间层来中转访问到后台
先放一个postman的成功效果
1.postman

思路

准备工作

前端：react
node: nest
后台：网上免费接口

实现流程

1. react 访问node http://localhost:3010/api/boss， 注意详细的url在headers中
2. node 批量中转访问后台，具体的url放在headers中
3. node 取出url，访问具体的后台接口：http://a.itying.com/api/productlist；

方案

前端

首先搞一下代理

file(src/setupProxy)

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(createProxyMiddleware('/api',
    {
      target: 'http://localhost:3010/', //换成你自己的域名
      pathRewrite: {
        '^/api': '/api',
      },
      changeOrigin: true,
      secure: false, // 是否验证证书
      ws: true, // 启用websocket
    }
  ));
};

然后在组件中使用axios访问boss

getData = () => {
  let url = '/api/boss';
  let headers = {
    'x-env': 'test',
    'x-url': '/api/productlist'
  }
  axios.get(url, { headers })
    .then((res) => {
    console.log('res', res);
  });
}

随便返回点东西再postman中做个小测试

nodejs

首先在controller写接口，统一接收前端请求，node再请求后台；
1.controller中写接口

file(boss.controller.ts)

import { Controller, Get, Req } from '@nestjs/common';
import { Request } from 'express';
import { ApiService } from '../../../../service/http.service';

@Controller('api')
export class BossController {
  constructor(
    private apiService: ApiService,
  ) { }

  // 统一接收请求
  @Get('boss')
  async bossGet(@Req() request: Request) {
    console.log('-ctr-request: ', request.headers);
    let result = await this.apiService.getZhuan(request).toPromise();
    console.log('result--------------------: ', result.data);
    return { result: result.data };
  }
}

2.在services处理header的数据，取出具体某个接口，再访问java后台

file(src/service/http.service)

import { HttpService, Injectable } from '@nestjs/common';
import { Observable, of } from "rxjs";
import { AxiosResponse } from "axios";

@Injectable()
export class ApiService {
  constructor(
    private readonly httpService: HttpService,
  ) { }

  // 处理前端传过来的headers的数据
  // 最终中转到后台接口：http://a.itying.com/api/productlist
  getRequestConfig(request) {
    let host='';
    // 判断开发，test,线上环境
    if(request.headers['x-env'] == 'test'){
      host = 'http://a.itying.com';
    }
    let obj = {
      url: host+request.headers['x-url'],
    }
    return obj;
  }

  getZhuan(request): Observable<AxiosResponse<any>> {
    let reqInfo = this.getRequestConfig(request);
    return this.httpService.get(reqInfo?.url).pipe();
  }
}

效果

1.postman

浏览器

总结

这里只使用nest+react做了一个很简单的举例，代码也很简单，主要展示一下逻辑和思路。加油大前端