后端接口代理问题

当前端项目与后端项目部署不在同一台服务器上或者同一服务器的不同端口上，导致前端项目无法访问后端接口，需要通过反向代理的方式让前端请求代理至后端项目部署的地址上。

前言

目前主流前后端项目都采用前后端分离方式设计，前端负责渲染页面，后端负责提供数据接口。react19 貌似在玩一种"很新的东西"，服务端渲染，可以在前端项目中可以直接嵌入 sql 语句操作数据库。怎么说呢，php 回来了，以一种新的身份回来了！

扯远了~，先聊回我们的主题：如何处理 nginx 部署前端项目后后端接口代理的问题。

问题定位

在开发阶段下，大部分脚手架内置了 http-proxy-middleware ，通过简单的代理配置即可完成跨域访问后端接口，例如：

http-proxy-middleware官方示例

import * as express from 'express';
import {
  createProxyMiddleware,
  Filter,
  Options,
  RequestHandler,
} from 'http-proxy-middleware';

const app = express();

app.use(
  '/api',
  createProxyMiddleware({
    target: 'http://www.example.org/api',
    changeOrigin: true,
  })
);

app.listen(3000);

// proxy and keep the same base path "/api"
// http://127.0.0.1:3000/api/foo/bar -> http://www.example.org/api/foo/bar

但 http-proxy-middleware 的 proxy 仅作用于开发阶段，打包时是不会把其打包进项目的，仅作为开发依赖。

那么如何通过 nginx 部署项目实现同样的效果呢？

解决方案

多加一个 location，以代理 api 为例：

nginx.conf 1

location /api {
    #设置代理目标(后端接口地址)
    proxy_pass https://api.eaveluo.com;
}

上述配置是将前端项目中所有带 /api 为 baseURL 的请求转发到后端项目 https://api.eaveluo.com/api 上。

但这块对部分需求有一个问题，若后端地址没有 /api 前缀，则无法正常访问。遇到这种情况可以采用下述配置：

nginx.conf 2

location /api/ {
    #设置代理目标(后端接口地址)
    proxy_pass https://api.eaveluo.com/;
}

注意看上述两段代码的细微区别，对比 nginx.conf 1 ， nginx.conf 2 在 /api 后多了一个 / ，这样就可以将所有带 /api 为 baseURL 的请求转发到后端项目 https://api.eaveluo.com 上，而不会拼接上 /api 前缀。