做插画的网站,wordpress修改js源码,平台网站怎么优化,贵阳网站如何推广23 | 静态文件中间件#xff1a;前后端分离开发合并部署骚操作这里还有一个比较特殊的用法一般情况下#xff0c;我们前后端分离的架构#xff0c;前端会编译成一个 index.html 文件和若干个 CSS 文件和 JavaScript 和图片文件CSS 文件和 JavaScript 和图片文件一般会部署在… 23 | 静态文件中间件前后端分离开发合并部署骚操作这里还有一个比较特殊的用法一般情况下我们前后端分离的架构前端会编译成一个 index.html 文件和若干个 CSS 文件和 JavaScript 和图片文件CSS 文件和 JavaScript 和图片文件一般会部署在 CDN 服务器上这个 index 文件就需要我们建立一个宿主来 host 它并且前端的一般路由的话我们现在都会用 HTML5 的 History 的路由模式这个时候前端就会对后端有一个特殊的诉求除了 API 的请求以外其他的请求的响应都应该是 index.html 这个静态文件要达到这个目的我们可以借助我们的中间件的执行原理来实现首先假设我们的 index.html 就是我们前端编译好的静态文件我们放置在 wwwroot 下面前端编译的任何文件都放在 wwwroot 下面然后我们再做一件事件就是 UseStaticFiles我们把目录访问整个去掉//services.AddDirectoryBrowser();首先映射静态文件app.UseStaticFiles();静态文件映射出来之后实际上还有一个诉求就是当我们访问其他特殊的页面地址的时候比如说 /order/get 这样子的页面的时候也应该响应我们的静态文件这个时候我们可以把这样一段逻辑加入进来// 判断我们当前的请求是否满足条件
app.MapWhen(context
{// 如果我们的请求不是以 API 开头的请求return !context.Request.Path.Value.StartsWith(/api);
}, appBuilder
{// 如果满足条件我就走我下面这一段中间件的逻辑var option new RewriteOptions();// 重写为 /index.htmloption.AddRewrite(.*, /index.html, true);appBuilder.UseRewriter(option);// 重写完之后再使用我们的静态文件中间件appBuilder.UseStaticFiles();
});这样子可以达到一个效果就是我们访问任意的非 API 目录的时候我们都可以得到 index.html启动程序https://localhost:5001/api/weatherforecast可以正常访问API 的请求我们都是让它通过的不是 API 的时候才会拦截这个时候如果访问https://localhost:5001/order会发现获得的是静态文件如果说静态文件是存在的这个时候实际上会响应原有的静态文件比如说访问https://localhost:5001/a/index.html这样子就可以发现我们能让静态文件的目录正常工作并且能将其他的我们需要的地址都重定向到 index.html当然这里还有另外一种写法就是不用 UseRewriter 的方式而是用 Run 的方式也是就用断路器的方式// 判断我们当前的请求是否满足条件
app.MapWhen(context
{// 如果我们的请求不是以 API 开头的请求return !context.Request.Path.Value.StartsWith(/api);
}, appBuilder
{如果满足条件我就走我下面这一段中间件的逻辑//var option new RewriteOptions();重写为 /index.html//option.AddRewrite(.*, /index.html, true);//appBuilder.UseRewriter(option);重写完之后再使用我们的静态文件中间件//appBuilder.UseStaticFiles();appBuilder.Run(async c {// 读取静态文件并且输出给我们的 Responsevar file env.WebRootFileProvider.GetFileInfo(index.html);c.Response.ContentType text/html;using (var fileStream new FileStream(file.PhysicalPath, FileMode.Open, FileAccess.Read)){await StreamCopyOperation.CopyToAsync(fileStream, c.Response.Body, null, BufferSize, c.RequestAborted);}});
});这种写法有一个缺点就是没办法像静态文件中间件那样输出正确的 Http 请求头对比一下两种方式的输出的请求头的不同启动程序访问https://localhost:5001/order打开调试工具可以看到对 order 的我们的响应头就只有 4 个其他的静态文件响应头会多出来 etagdatalast-modified这些的话就是我们关于 HTTP 缓存可以用到的头所以说我们还是推荐使用上面这种方式静态中间件的方式而不是自己输出文件的方式
