springboot后端的接口headers
问到了前后端通信中一个常被初学者混淆的重点——
为什么 fetch('/api/show', { headers: { 'Accept': 'text/plain' } })，而不是
headers: { 'Content-Type': 'application/json' }。
🧩 一句话结论
👉 因为你的接口：
@GetMapping("/show")
public String action() {return "Hello Spring Boot!";
}
是一个 GET 请求，且返回纯文本（text/plain），
所以前端只需要告诉服务器「我能接受纯文本响应」(Accept)，
而不需要告诉服务器「我发的是 JSON 数据」（Content-Type）。
📘 详细解释
① Accept：表示客户端期望接收的数据格式
在你的 fetch 请求中：
headers: {'Accept': 'text/plain'
}
意思是：
“我（浏览器）希望服务器返回纯文本（text/plain）。”
而你的 Spring Boot 接口：
@GetMapping("/show")
public String action() {return "Hello Spring Boot!";
}
默认就是返回一个 text/plain 类型的响应。
👉 所以这两个是匹配的。
② Content-Type：表示客户端发送的数据格式
Content-Type 只在你**有请求体（body）**时才有意义。
例如：
fetch('/api/register', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ username: 'Tom', password: '123456' })
})
这时你告诉后端：
“我发给你的内容是 JSON 格式，请按 JSON 来解析。”
Spring Boot 中的 @RequestBody User user 就是用来解析这种 JSON 请求的。
✅ 结论总结
| 请求类型 | 是否需要请求体 | 用什么 header | 说明 |
|---|---|---|---|
GET /api/show | ❌ 无请求体 | 'Accept': 'text/plain' | 告诉后端希望拿到纯文本 |
POST /api/register | ✅ 有请求体(JSON) | 'Content-Type': 'application/json' | 告诉后端发送的是 JSON |
🔧 实际建议
其实即便你不写：
headers: { 'Accept': 'text/plain' }
浏览器默认也会发送 Accept: */*，Spring Boot 仍然能正确返回 "Hello Spring Boot!"。
关于接口的get到html文件代码如下：
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><title>Show API Demo</title><style>body {font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;display: flex;min-height: 100vh;align-items: center;justify-content: center;background: #f6f8fa;margin: 0;}.card {background: #fff;padding: 24px;border-radius: 12px;box-shadow: 0 6px 24px rgba(0,0,0,0.08);width: 360px;text-align: center;}h1 { margin: 0 0 12px; font-size: 20px; }#result {margin: 16px 0;padding: 12px;border-radius: 8px;background: #f0f4ff;min-height: 36px;display: flex;align-items: center;justify-content: center;color: #1a1a1a;}button {padding: 8px 14px;border-radius: 8px;border: none;cursor: pointer;background: #2b82ff;color: #fff;font-weight: 600;}.hint { margin-top: 10px; color: #666; font-size: 13px; }</style>
</head>
<body>
<div class="card"><h1>调用后端接口 /api/show</h1><div id="result">正在加载…</div><div><button id="refreshBtn">刷新</button></div><div class="hint">注意：如果后端与此页面不在同一域或端口，请开启 CORS。</div>
</div><script>const resultEl = document.getElementById('result');const btn = document.getElementById('refreshBtn');async function fetchShow() {resultEl.textContent = '加载中...';try {// 如果你的控制器映射在 /api 下，请使用 /api/showconst resp = await fetch('/api/show', {method: 'GET',headers: {'Accept': 'text/plain'}});if (!resp.ok) {resultEl.textContent = `请求失败：${resp.status} ${resp.statusText}`;return;}// 接口返回的是字符串，所以用 text()const text = await resp.text();resultEl.textContent = text;} catch (err) {console.error(err);resultEl.textContent = '网络错误，无法连接到后端。检查服务器是否运行或 CORS 是否已开启。';}}// 页面加载时自动请求一次window.addEventListener('load', fetchShow);btn.addEventListener('click', fetchShow);
</script>
</body>
</html>
效果图如下：
