扩展 IsAjaxRequest() 以包含获取 api 请求

Posted 2023-02-22

【中文标题】扩展 IsAjaxRequest() 以包含获取 api 请求

【英文标题】：Extend IsAjaxRequest() to include fetch api requests

【发布时间】：2018-05-01 08:58:05

【问题描述】：

我目前正在使用 MVC5 构建一个站点，并且在发出 ajax 请求时需要提供不同的内容。

通常我们使用 jQuery 并使用 $.ajax 发出 ajax 请求，但最近我们已经转向使用 fetch api。但是，使用 fetch api 的请求没有向 MVC 注册为 ajax 请求，因此使用了错误的模板。

我考虑过自己制作 ajax 请求扩展，但不确定要检查什么标头：

    public static bool IsAjaxOrFetchRequest(this HttpRequestBase request)
    
        if (request != null && request.Headers != null)
        
            if (request.Headers["Custom-Fetch-Header"] != null)
            
                return true;
            
        

        return request.IsAjaxRequest();
    

是否有一个 fetch 与 Request.Headers["X-Requested-With"] == "XMLHttpRequest" ajax 发送的所有请求一起发送的标头？

单步执行代码，我看不到任何突出的地方

【问题讨论】：

浏览器总是添加Origin请求头来获取跨域发送的请求和XHR请求。

@sideshowbarker 不幸的是他们来自同一个站点

【参考方案1】：

好吧，进一步研究一下，我似乎找不到任何随请求一起发送的标准标头，所以我创建了自己的标头：

const request = new Request(url, 
  headers: new Headers(
    'X-Is-Ajax-Request': 'True'
  )
);

return fetch(request)
  .then(html => 
    const $result = $(html);
    const $content = $result.filter('.js-sidebar-panel-content');
    return $content.length ? $content : $result;
  );

然后我可以更新我的扩展：

public static bool IsAjaxOrFetchRequest(this HttpRequestBase request)

    if (request != null && request.Headers != null)
    
        if (request.Headers["X-Is-Ajax-Request"] != null)
        
            return bool.Parse(request.Headers["X-Is-Ajax-Request"]);
        
    

    return request.IsAjaxRequest();

【讨论】：

这非常有效！但我很困惑，你为什么要费心更新扩展，而不是像其他框架发送的那样使用默认的 IsAjaxRequest() 扩展并发送 "X-Requested-With": "XMLHttpRequest"？

如果需要的话，我可以区分 ajax 请求和 fetch 请求

@Pete 在实践中出现过吗？

"X-Requested-With": "Fetch" 会更好。

Kenneth 的解决方案是最好的，因为它不需要更改 C# 代码就可以使获取看起来像一个 ajax 请求。 Mat J 很好，因为它更好地符合实际发生的情况，并提供与告诉 c# 您正在使用什么方法访问它的一致性，但随后需要额外的编码来添加 IsFetchRequest 支持方法，然后将您的编码更新为 IsAjaxRequest | | IsFetchRequest... 将 X-Request-With 作为 XMLHttpRequest 传入要简单得多，并且只需要添加 fetch 选项即可使其按需要工作。