如何修复表单提交的action函数？提交后跳转PDF首次加载异常问题

问题根因 #

• 直接将表单POST请求的action目标设置为静态PDF资源时，服务器首次响应POST请求返回的Content-Type响应头配置错误，默认为text/plain类型，浏览器会按照纯文本格式渲染PDF源码
• 刷新页面后浏览器会发起GET请求请求PDF资源，此时会根据.pdf后缀识别到正确的MIME类型application/pdf，才能正常渲染文件

解决方案 #

方案1：修改表单提交逻辑，提交成功后主动跳转PDF #

拦截表单的默认提交行为，先异步提交表单数据到Netlify，提交成功后再跳转PDF地址，此时跳转发起的是GET请求，会自动触发正确的MIME类型识别：

<form name="landing" method="POST" data-netlify="true" id="signupForm">
  <div class="text-fields">
    <h3>邮箱地址</h3>
    <input type="email" class="text-input email-input" placeholder="请输入你的邮箱" name="email">
  </div>
  <button class="btn-yellow" type="submit">注册</button>
</form>

<script>
const form = document.getElementById('signupForm');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  // 提交表单数据到Netlify
  await fetch('/', {
    method: 'POST',
    body: formData
  });
  // 提交成功后跳转PDF
  window.location.href = 'img/newsletter.pdf';
});
</script>

方案2：配置服务器静态资源响应头 #

如果站点部署在Netlify，可以在站点根目录新增_headers文件，强制指定PDF资源的响应类型：

/img/*.pdf
  Content-Type: application/pdf
  Content-Disposition: inline

如果使用netlify.toml进行配置，添加以下规则即可：

[[headers]]
  for = "/img/*.pdf"
  [headers.values]
    Content-Type = "application/pdf"
    Content-Disposition = "inline"

配置完成后无论通过POST跳转还是GET请求访问PDF，都会按照正确的类型渲染，不会再出现展示源码的问题。

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