使用 Yarp.ReverseProxy 实现一个 dev proxy server

Intro

最近在改一个我们前后端分离的一个项目，前端后端是在不同的项目里，前端是一个 React 的纯前端项目，web server 用的 nginx，后端是一个 ASP.NET Core Web Api 项目，原来我们的认证是在纯前端做的一个 implict 认证，认证成功之后 access_token 是存在 local storage 里的，认证过程中的 cookie 也是由前端 javascript 写的，我们安全团队觉得这样不安全，access_token, cookie 应该不能通过前端 javascript 获取到，于是我们就做了一些改造，在前端项目里套了一个 asp.net core web server 认证过程通过 asp.net core 来完成，前端请求 API 的时候通过 cookie 来进行认证授权，由于前后端是分开的，我们调试的时候需要调用测试环境的 API 而直接通过前端去调用的话因为不是一个域名会导致 cookie 不会自动带上去，所以参考前端的做法加了一个 proxy，将本地的 API 请求转发到测试环境的 API 从而避免 cookie 的问题

Sample

我们使用 Yarp.ReverseProxy 来做一个简单的代理，不需要配置 route ，cluster 负载均衡等，我们直接使用 Forward 即可，

首先添加 Yarp.ReverseProxy 引用，这里的示例使用 2.3.0 版本

<PackageReference Include="Yarp.ReverseProxy" Version="2.3.0" />

我们的示例是一个基于 OpenIdConnect 认证的应用，需要登录才能访问，示例里只有 web 没有 API，API 转发到上游服务

部分示例代码如下：

首先注册 Forwarder 服务

builder.Services.AddHttpForwarder();

然后为 Development 环境添加 MapForwarder

if (app.Environment.IsDevelopment())
{
 var proxyApiUrl = app.Configuration["AppSettings:ApiUrl"];
 ArgumentException.ThrowIf(proxyApiUrl);
 app.MapForwarder("/api/{**catch-all}", proxyApiUrl);
 app.MapForwarder("/reservation-api/{**catch-all}",
 proxyApiUrl,
 transformer =>
 {
 transformer.UseDefaultForwarders = false;
 transformer.AddPathRemovePrefix("/reservation-api");
 });
}

这里注册了两个路由，一个是 /api/{**catch-all}，另外一个是 /reservation-api/{**catch-all}

/api/{**catch-all} 直接转发 /api/** 请求到 /api/**
/reservation-api/{**catch-all} 转发 /reservation-api/** 到 /**，并禁用默认的 x-forwarded headers

** 是 ASP.NET Core 里支持的路由参数，表示任意路径，包含 /

proxy api url 在配置文件里配置如下：

{
 "AppSettings": {
 "ApiUrl": "https://reservation.weihanli.xyz/"
 }
}

下面写了一个简单的示例，写了一个简单的 js 代码来调用 API


$("#btnApiTest").click(()=>{
 $.ajax({
 url: '/api/notice', // API 端点
 type: 'GET', // 请求方法
 dataType: 'json', // 期望的响应数据类型
 success: function(response) {
 console.log('请求成功:', response); // 打印响应内容
 $('#result').html(`api: ${JSON.stringify(response)}`);
 },
 error: function(xhr, status, error) {
 console.error('请求失败:', status, error); // 打印错误信息
 }
 });
});
$("#btnReservationApiTest").click(()=>{
 $.ajax({
 url: '/reservation-api/api/notice', // API 端点
 type: 'GET', // 请求方法
 dataType: 'json', // 期望的响应数据类型
 success: function(response) {
 console.log('请求成功:', response); // 打印响应内容
 $('#result').html(`reservation-api: ${JSON.stringify(response)}`);
 },
 error: function(xhr, status, error) {
 console.error('请求失败:', status, error); // 打印错误信息
 }
 });
});

/api/notice 测试：

request

response

reservation-api/api/notice

reservation-api request

yarp proxy info:

proxy log

我们这个测试例子需要登录才能访问，我们来看看是否转发请求的时候有没有转发 cookie 到上游服务呢，我们在上游服务中配置了 http logging 中间件来记录 HTTP 请求响应信息，我们看下是否有转发我们的 cookie

http logging info

可以看到我们的 auth cookie 也被一起转发到了上游服务 API

具体代码可以参考：
https://github.com/WeihanLi/SamplesInPractice/tree/main/YarpSamples/DevProxySample

这样之后，前端可以本地访问测试环境的 API 了，但是不能够纯前端使用，需要通过 ASP.NET Core 的 web server 来实现认证登录成功之后才能访问 cookie，如果只启动纯前端项目且没有认证 cookie 的时候就会有问题因为没有办法登录，怎么样解决比较好呢，大家有什么好办法吗，欢迎大家留言一起讨论下。

本文的示例，只做演示用，还有部分实现不在演示代码中，比如我们需要为 web 和 api 配置相同的 data protection 这样前后端才能解析同一个 cookie，因为在 asp.net core 中 cookie 是加密的，需要配置 data protection 才可以跨应用跨实例解析同一个 cookie，具体可以参考官方文档

References

https://github.com/dotnet/yarp/tree/main/samples/ReverseProxy.Direct.Sample
https://github.com/dotnet/yarp/blob/main/samples/ReverseProxy.Direct.Sample/Program.cs
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/servers/yarp/direct-forwarding?view=aspnetcore-9.0&WT.mc_id=DT-MVP-5004222
https://github.com/WeihanLi/SamplesInPractice/blob/main/YarpSamples/DevProxySample/Program.cs