深入剖析：YApi 新版如何解密 HTTP 请求中的数据

在 YApi 的新版本中，由于 Chrome 安全策略的限制，cross-request 升级到 3.0 后，不再支持文件上传功能。然而，通过巧妙的方法，仍能查看 network，本文将逐一揭晓。

跨域请求限制

Cross-request 3.0 升级后，Chrome 浏览器收紧了跨域请求的限制，禁止第三方脚本访问同源站点提交的表单数据。这导致 YApi 中的文件上传功能无法正常工作。

解决之道

要查看 YApi 中的 network，我们需要找到一种方法来规避 Chrome 的限制。以下是两种可行的方法：

方法一：禁用同源策略

在 Chrome 浏览器中输入 chrome://flags/#allow-insecure-localhost，将 "允许不安全的本地主机" 选项设置为 "已启用"，然后重新启动浏览器。这将暂时禁用同源策略，允许第三方脚本访问本地主机的表单数据。

方法二：使用浏览器扩展

有许多浏览器扩展可以帮助我们查看 network，例如：

• ModHeader
• Allow CORS: Access-Control-Allow-Origin

安装这些扩展后，我们可以在 YApi 中通过 Network 面板轻松查看 HTTP 请求数据。

实例演示

假设我们有一个名为 upload 的文件上传表单，代码如下：

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>

通过使用浏览器扩展，我们可以看到 YApi 中 HTTP 请求的详细信息，包括：

• 请求头：包含有关请求的详细信息，例如方法、URI 和标头。
• 请求正文：包含表单数据，包括上传的文件。
• 响应头：包含有关响应的详细信息，例如状态代码和标头。
• 响应正文：包含服务器返回的数据。

这些信息对于调试文件上传问题或分析 HTTP 请求和响应非常有帮助。

结论

尽管 Chrome 的安全策略限制了 cross-request，但通过禁用同源策略或使用浏览器扩展，我们仍然可以查看 YApi 中的 HTTP 请求数据。本文提供了清晰的步骤和示例，帮助开发人员轻松解决问题，并充分利用 YApi 的强大功能。