Chrome点击返回至搜索页出错问题的排查与解决方案

问题详情 #

SearchController代码如下： #

namespace Bejebeje.Mvc.Controllers
{
  using System.Threading.Tasks;
  using Bejebeje.Models.Search;
  using Microsoft.AspNetCore.Mvc;
  using Services.Services.Interfaces;

  public class SearchController : Controller
  {
    private readonly ILyricsService _lyricsService;

    private readonly IArtistsService _artistsService;

    public SearchController(
      ILyricsService lyricsService,
      IArtistsService artistsService)
    {
      _lyricsService = lyricsService;
      _artistsService = artistsService;
    }

    [HttpGet]
    public IActionResult Index()
    {
      SearchViewModel viewModel = new SearchViewModel();

      return View(viewModel);
    }

    [HttpPost]
    public async Task<IActionResult> Index(string searchTerm)
    {
      SearchViewModel viewModel = new SearchViewModel();

      if (string.IsNullOrEmpty(searchTerm))
      {
        return View(viewModel);
      }

      viewModel.SearchTerm = searchTerm;

      viewModel.Artists = await _artistsService
        .SearchArtistsAsync(searchTerm);

      viewModel.Lyrics = await _lyricsService
        .SearchLyricsAsync(searchTerm);

      return View(viewModel);
    }
  }
}

问题重现步骤： #

• 访问网站首页
• 搜索艺术家（例如：Şivan）
• 点击搜索结果中的艺术家（Şivan Perwer）
• 点击浏览器返回按钮
• Chrome浏览器显示表单重提交错误

问题成因 #

当前搜索功能使用POST请求提交搜索关键词，浏览器会将POST请求的历史记录标记为“可能触发重复操作”的请求。当用户点击返回按钮时，浏览器尝试重新发送该POST请求，为避免重复提交风险（比如重复创建数据），Chrome会拦截并弹出错误提示。

而Stack Overflow这类网站的搜索功能采用GET请求，GET请求会将搜索参数直接拼接在URL中，后退时浏览器只需加载该URL对应的页面，不会触发表单重提交的安全校验，因此能正常显示之前的搜索结果。

解决方案 #

将搜索请求从POST改为GET，具体修改如下：

1. 修改控制器代码 #

合并GET和POST方法，统一处理带搜索参数的GET请求：

namespace Bejebeje.Mvc.Controllers
{
  using System.Threading.Tasks;
  using Bejebeje.Models.Search;
  using Microsoft.AspNetCore.Mvc;
  using Services.Services.Interfaces;

  public class SearchController : Controller
  {
    private readonly ILyricsService _lyricsService;
    private readonly IArtistsService _artistsService;

    public SearchController(
      ILyricsService lyricsService,
      IArtistsService artistsService)
    {
      _lyricsService = lyricsService;
      _artistsService = artistsService;
    }

    [HttpGet]
    public async Task<IActionResult> Index(string searchTerm = null)
    {
      SearchViewModel viewModel = new SearchViewModel();

      if (!string.IsNullOrEmpty(searchTerm))
      {
        viewModel.SearchTerm = searchTerm;
        viewModel.Artists = await _artistsService.SearchArtistsAsync(searchTerm);
        viewModel.Lyrics = await _lyricsService.SearchLyricsAsync(searchTerm);
      }

      return View(viewModel);
    }
  }
}

2. 修改前端表单 #

找到搜索页面的form标签，将method="post"替换为method="get"。修改后，提交搜索时参数会自动拼在URL中，用户返回时浏览器直接加载该URL，即可正常显示之前的搜索结果，和Stack Overflow的行为一致。

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