问题记录@2023-09-19

Next.js shallow router.back. http.cookiejar.LoadError: '***' does not look like a Netscape format cookies file. 前端 js 或者 IDEA 中使用内置的 HTTP 客户端传输二进制数据给后端

For shallow back and forward you can always use window.history.back() and window.history.forward() or any other method of the browser's history API. If your app supports shallow navigation it should work our of the box.

使用 fetch 直接传输二进制，不是 multipart/form-data，而是 content-type: image/jpeg 这样。

要直接发送二进制数据（如图像文件）而不使用 multipart/form-data，你可以直接读取文件的二进制内容并将其作为请求体发送。这通常涉及到使用 FileReader API 或类似的机制来读取文件内容，然后使用 fetch 或 XMLHttpRequest 发送数据。

以下是一个示例，展示如何读取一个图像文件并以 image/jpeg 的 Content-Type 发送它：

1<input type="file" id="imageInput" accept="image/jpeg">
2<button id="uploadButton">上传</button>

1document.getElementById('uploadButton').addEventListener('click', function() {
2    var fileInput = document.getElementById('imageInput');
3    var file = fileInput.files[0];
4
5    if (file) {
6        // 创建 FileReader 对象读取文件
7        var reader = new FileReader();
8
9        reader.onload = function(e) {
10            var arrayBuffer = e.target.result;
11
12            // 使用 fetch 发送二进制数据
13            fetch('your-server-endpoint', {
14                method: 'POST',
15                headers: {
16                    'Content-Type': 'image/jpeg'
17                },
18                body: arrayBuffer
19            })
20            .then(response => response.json())
21            .then(data => {
22                console.log(data);
23            })
24            .catch(error => {
25                console.error('Error:', error);
26            });
27        };
28
29        // 读取文件内容
30        reader.readAsArrayBuffer(file);
31    }
32});

在这个示例中：

1. 我们首先为上传按钮添加了一个点击事件监听器。
2. 当用户选择文件并点击上传按钮时，我们使用 FileReader 读取文件的内容。
3. FileReader 完成读取后，我们在它的 onload 事件处理器中获取文件的二进制内容（作为 ArrayBuffer）。
4. 接着我们使用 fetch API 发送这个二进制内容，同时设置请求头 Content-Type 为 image/jpeg。

这种方法直接发送原始二进制数据，不使用 multipart/form-data 编码，适用于你的需求。需要注意的是，你的服务器端代码需要能够处理原始二进制流，并正确地解析和处理这些数据。

在 IntelliJ IDEA 中，你可以使用内置的 HTTP 客户端来创建和发送 HTTP 请求。这个功能通过 HTTP 请求文件（以 .http 或 .rest 扩展名）提供，允许你编写和发送简单到复杂的 HTTP 请求。这对于测试 API 非常有用。

1. 创建一个新文件：在你的项目中，右键点击你想要创建文件的目录，选择 New -> File。
2. 给文件命名：将文件命名为带有 .http 或 .rest 扩展名的文件，例如 request.http。
3. 编写 HTTP 请求：在文件中，你可以编写 HTTP 请求。语法非常直接，类似于你可能在 Postman 或 curl 中使用的语法。

1GET https://api.example.com/data
2Accept: application/json

根据你之前的需求，如果你想通过 IDEA 发送二进制数据（例如，作为 image/jpeg），你将需要将二进制数据编码为 Base64 或使用外部文件。目前，IDEA 的 HTTP 客户端不支持直接在请求体中嵌入原始二进制数据，但你可以从文件中读取。

1POST https://your-server-endpoint
2Content-Type: image/jpeg
3
4< ./path/to/your/image.jpg

注意: Header 和 Body 之间的换行

在这个示例中，< ./path/to/your/image.jpg 表示从指定路径读取文件内容并将其作为请求体发送。确保替换为你的图像文件的实际路径。

1. 在 HTTP 请求文件中编写请求：按照上述示例编写你的请求。
2. 发送请求：将光标放在请求上，然后点击左边的绿色运行按钮，或者右键点击请求并选择“Run”。
3. 查看响应：请求的响应将在 IDEA 底部的“Run”窗口中显示。

• 环境变量：IDEA 支持使用环境变量。你可以定义多个环境，并在发送请求时选择使用哪一个。
• 脚本和测试：你还可以在 .http 文件中编写简单的 JavaScript 测试脚本来验证响应。
• 版本控制：由于请求是以文本形式保存的，它们可以方便地加入版本控制系统，如 Git。
• 不支持二进制请求体：正如上所述，如果需要发送二进制数据，你可能需要将其转换为 Base64 或使用文件引用。

使用 IntelliJ IDEA 的 HTTP 客户端功能，你可以轻松地测试和调试 HTTP API，这是一个非常有用的功能，尤其是对于开发和测试 RESTful 服务的开发人员来说。

只需要在 cookies 文件开始一行添加如下内容即可：

1# Netscape HTTP Cookie File