如何用WebBroker(TIdHTTPWebBrokerBridge)+TWebModule服务HTML引用的文件

问题核心原因 #

你返回CSS文件的HTTP响应没有设置正确的Content-Type响应头，浏览器无法识别返回内容是层叠样式表，因此不会将其应用到页面渲染。
你直接访问/data/style.css时浏览器会把内容当纯文本展示，所以看起来内容正常，但HTML引用时浏览器会严格校验MIME类型，类型不匹配就直接忽略样式。

其他可能的诱因 #

• 缓存问题：浏览器可能缓存了之前错误MIME类型的响应，清空缓存或者强制刷新（Ctrl+F5）可以排查。
• 权限问题：TFileStream读取文件时如果权限不足会返回空内容，但你已经确认内容可正常读取，该概率较低。

修复方案 #

修改BeforeDispatch事件代码，在返回CSS文件时补充正确的Content-Type头，同时可以补全其他静态文件的MIME类型适配，修改后的代码如下：

procedure TWebModule1.WebModuleBeforeDispatch(Sender: TObject; Request: TWebRequest; 
  Response: TWebResponse; var Handled: Boolean);
var
  LocalPath: String;
  Ext: string;
begin
  if Request.PathInfo.StartsWith('/data/') then
  begin
    LocalPath := DataPath + StringReplace(Request.PathInfo, '/', '\', [rfReplaceAll]);
    if FileExists(LocalPath) then
    begin
      Response.ContentStream := TFileStream.Create(LocalPath, fmShareDenyWrite);
      // 新增：根据文件后缀设置正确的MIME类型
      Ext := LowerCase(ExtractFileExt(LocalPath));
      if Ext = '.css' then
        Response.ContentType := 'text/css; charset=utf-8'
      else if Ext = '.js' then
        Response.ContentType := 'application/javascript; charset=utf-8'
      else if Ext = '.png' then
        Response.ContentType := 'image/png'
      else if Ext = '.jpg' then
        Response.ContentType := 'image/jpeg'
      else
        Response.ContentType := 'application/octet-stream';
      Assert(Response.ContentStream.Size > 0);
    end
    else
    begin
      // 补充文件不存在的404处理
      Response.StatusCode := 404;
      Response.Content := '404 Not Found';
    end;
    Handled := True;
  end;
end;

修改后重启服务，清空浏览器缓存再访问即可生效。

内容的提问来源于stack exchange，提问作者m227