前言
作為前端開(kāi)發(fā)，你可能遇到過(guò)這些詭異問(wèn)題：
"POST 請(qǐng)求數(shù)據(jù)莫名消失，后端說(shuō)根本沒(méi)收到"
"本地開(kāi)發(fā)突然全部跳轉(zhuǎn) HTTPS，localhost 都訪問(wèn)不了"
"生產(chǎn)環(huán)境加載巨慢，Network 里全是紅色的重定向"
"新上線的測(cè)試域名所有瀏覽器都打不開(kāi)，顯示連接被拒絕"
本文通過(guò)真實(shí)踩坑案例，教你快速定位和解決重定向問(wèn)題。
案例一：POST 請(qǐng)求數(shù)據(jù)神秘消失
?? 問(wèn)題癥狀:
// 前端代碼
fetch('http://api.example.com/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: 'admin',
password: '123456'
})
})
.then(res => res.json())
.then(data => console.log(data))
現(xiàn)象：
用戶影響：
所有登錄、注冊(cè)、提交表單操作全部失敗
用戶反饋"一直提示參數(shù)錯(cuò)誤"
錯(cuò)誤率突然飆升到 100%
快速定位
1. 打開(kāi) Chrome DevTools → Network
Name: login
Status: 301 Moved Permanently ← 第一個(gè)請(qǐng)求
Request Method: POST
Name: login
Status: 400 Bad Request ← 第二個(gè)請(qǐng)求
Request Method: GET ← 變了！
2. 點(diǎn)擊第一個(gè)請(qǐng)求查看 Response Headers
HTTP/1.1 301 Moved Permanently
Location: https://api.example.com/login
3. 確認(rèn)問(wèn)題：301 重定向?qū)е?POST 變 GET
解決方案
去哪看：
去哪改：
代碼高亮：
# ? 錯(cuò)誤配置（導(dǎo)致 POST 變 GET）
server {
listen 80;
return 301 https://$server_name$request_uri;
}
# ? 正確配置（保持 POST）
server {
listen 80;
return 307 https://$server_name$request_uri; # 改這里
}
或者前端直接改用 HTTPS：
fetch('https://api.example.com/login', { // 加 s
method: 'POST',
// ...
})
案例二：本地開(kāi)發(fā)突然無(wú)法訪問(wèn)
?? 問(wèn)題癥狀:
// 本地啟動(dòng)項(xiàng)目
npm run dev
// ? Server running at http://localhost:8080
訪問(wèn) http://localhost:8080 時(shí)：
現(xiàn)象：
? 瀏覽器自動(dòng)跳轉(zhuǎn)到 https://localhost:8080
? 頁(yè)面顯示"無(wú)法訪問(wèn)此網(wǎng)站" 或 "連接被拒絕"
? Network 面板顯示 307 Internal Redirect
? 狀態(tài)欄顯示 Non-Authoritative-Reason: HSTS
? 昨天還能訪問(wèn)，今天突然就不行了
? 同事的電腦能正常訪問(wèn)，只有你的電腦有問(wèn)題
Status: 307 Internal Redirect
Non-Authoritative-Reason: HSTS ← 關(guān)鍵！
快速定位
1. 確認(rèn)是 HSTS 問(wèn)題
打開(kāi) chrome://net-internals/#hsts，輸入 localhost
如圖：
操作如下：
代碼高亮：
Query HSTS/PKP domai 輸入當(dāng)前域名搜索
// 如果有內(nèi)容說(shuō)明是HSTS相關(guān)
2. 回憶最近操作
是否訪問(wèn)過(guò)生產(chǎn)環(huán)境 https://example.com？
生產(chǎn)環(huán)境是否設(shè)置了 includeSubDomains？
是否在 localhost 上測(cè)試過(guò) HTTPS？
? 解決方案
臨時(shí)方案（1分鐘）：清除 HSTS
如圖：
1. chrome://net-internals/#hsts
2. Delete domain security policies
3. 輸入: localhost
4. 點(diǎn)擊 Delete
5. 刷新頁(yè)面
永久方案（5分鐘）：本地啟用 HTTPS
# 安裝 mkcert
brew install mkcert # Mac
choco install mkcert # Windows
# 生成證書(shū)
mkcert -install
mkcert localhost 127.0.0.1
// vite.config.js
import fs from 'fs'
export default {
server: {
https: {
key: fs.readFileSync('./localhost-key.pem'),
cert: fs.readFileSync('./localhost.pem')
}
}
}
快速測(cè)試方案（0分鐘）：
用隱身模式 Ctrl+Shift+N
或換個(gè)端口 port: 3000
案例三：網(wǎng)站加載巨慢，重定向循環(huán)
?? 問(wèn)題癥狀
用戶投訴：
Network 面板顯示：
代碼高亮：
app.js - 301 Moved Permanently - 2.3s
app.js - 301 Moved Permanently - 2.1s
app.js - 301 Moved Permanently - 1.8s
app.js - 200 OK - 0.5s
現(xiàn)象：
? 同一個(gè)資源重定向 3-5 次
? 每次重定向耗時(shí) 2 秒左右
? 最終能加載成功，但體驗(yàn)極差
? 清除瀏覽器緩存后第一次訪問(wèn)更慢
關(guān)鍵特征：
快速定位
1. 追蹤重定向鏈
curl -L -v https://cdn.example.com/static/app.js 2>&1 | grep -E "HTTP|Location"
# 輸出
> GET /static/app.js
< HTTP/2 301
< Location: /assets/static/app.js
> GET /assets/static/app.js
< HTTP/2 301
< Location: /assets/assets/static/app.js ← 路徑重復(fù)了！
2. 繞過(guò) CDN 測(cè)試源站
curl -I https://origin.example.com/static/app.js
# 輸出
Location: /assets/static/app.js ← Nginx 配置錯(cuò)誤
3. 確認(rèn)問(wèn)題：重定向規(guī)則路徑拼接錯(cuò)誤
解決方案
去哪看：
去哪改：
# ? 錯(cuò)誤（$uri 包含完整路徑）
location /static/ {
return 301 /assets/$uri; # /static/app.js → /assets/static/app.js
}
# ? 正確（用正則提取文件名）
location ~ ^/static/(.*)$ {
return 301 /assets/$1; # /static/app.js → /assets/app.js
}
改完后立即清除 CDN 緩存：
代碼高亮：
# Cloudflare
curl -X POST "https://api.cloudflare.com/.../purge_cache" \
--data '{"files":["https://cdn.example.com/static/*"]}'
案例四：新測(cè)試域名完全無(wú)法訪問(wèn)
?? 問(wèn)題癥狀
背景：
現(xiàn)象：
? 所有瀏覽器都顯示"無(wú)法訪問(wèn)此網(wǎng)站"
? curl 能訪問(wèn)成功，但瀏覽器不行
? 錯(cuò)誤信息：ERR_SSL_PROTOCOL_ERROR 或 連接被重置
? Network 面板顯示 (failed) net::ERR_CONNECTION_REFUSED
? 同事新裝的瀏覽器也訪問(wèn)不了（排除緩存問(wèn)題）
關(guān)鍵線索：
快速定位
1. 檢查 Preload 狀態(tài)
訪問(wèn) https://hstspreload.org/?domain=example.com
{
"status": "preloaded",
"includeSubDomains": true ← 問(wèn)題根源！
}
2. 確認(rèn)瀏覽器行為
chrome://net-internals/#hsts
輸入: test.example.com
Static STS domain: yes ← 在瀏覽器內(nèi)置列表中
Static upgrade mode: FORCE_HTTPS
Static STS include subdomains: yes
3. 確認(rèn)問(wèn)題：Preload 強(qiáng)制所有子域名用 HTTPS
解決方案
去哪看：
只有兩個(gè)選擇：
方案 1：為測(cè)試域名配置 HTTPS（推薦，30分鐘）
# 申請(qǐng)通配符證書(shū)
certbot certonly --dns-cloudflare -d *.example.com
server {
listen 443 ssl;
server_name test.example.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
}
方案 2：換獨(dú)立域名（推薦，5分鐘）
# 不用 example.com 的子域名
server {
listen 80;
server_name test-env.otherdomain.com; # 完全獨(dú)立的域名
}
不推薦：從 Preload 移除
案例五：HTTPS 頁(yè)面資源加載失敗
?? 問(wèn)題癥狀：
<!-- HTTPS 頁(yè)面 -->
<script src="http://cdn.example.com/jquery.js"></script>
現(xiàn)象：
? 控制臺(tái)報(bào)錯(cuò)：Mixed Content: ... blocked
? 頁(yè)面功能異常（依賴的 JS 沒(méi)加載）
? 部分用戶能正常訪問(wèn)，部分不行（詭異?。?/p>
? 無(wú)痕模式能訪問(wèn)，正常模式不行
關(guān)鍵線索：
Mixed Content: The page at 'https://www.example.com/' was loaded over HTTPS,
but requested an insecure resource 'http://cdn.example.com/jquery.js'.
This request has been blocked.
快速定位
1. 檢查是否是 HSTS 導(dǎo)致的差異
# 測(cè)試 CDN 是否有 HSTS
curl -I https://cdn.example.com
Strict-Transport-Security: max-age=31536000 ← 有 HSTS
2. 理解問(wèn)題原因
解決方案
去哪改：
全局搜索代碼中的 http://
檢查 HTML、JS、CSS 中的資源引用
改什么：
<!-- ? 錯(cuò)誤 -->
<script src="http://cdn.example.com/jquery.js"></script>
<!-- ? 方案 1：協(xié)議相對(duì) URL -->
<script src="http://cdn.example.com/jquery.js"></script>
<!-- ? 方案 2：明確 HTTPS -->
<script src="https://cdn.example.com/jquery.js"></script>
快速修復(fù)：CSP 自動(dòng)升級(jí)
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
快速排查工具
Chrome DevTools
// 檢查重定向次數(shù)
performance.getEntriesByType('navigation')[0].redirectCount
// 檢查 HSTS
// 直接訪問(wèn)：chrome://net-internals/#hsts
命令行
# 查看重定向鏈
curl -sI -L http://example.com | grep -E "HTTP|Location"
# 檢查 HSTS 頭
curl -I https://example.com | grep -i strict
# 跟隨重定向并顯示詳情
curl -L -v http://example.com 2>&1 | less
在線工具
問(wèn)題決策樹(shù)
遇到重定向問(wèn)題
↓
是否看到 "307 Internal Redirect"？
├─ 是 → HSTS 問(wèn)題
│ → chrome://net-internals/#hsts 查看并清除
└─ 否 → 繼續(xù)
POST 請(qǐng)求是否失??？
├─ 是 → 檢查狀態(tài)碼
│ ├─ 301/302 → Nginx 改用 307
│ └─ 其他 → 檢查服務(wù)器日志
└─ 否 → 繼續(xù)
是否有多次重定向？
├─ 是 → 檢查 Nginx 重寫規(guī)則
│ → 清除 CDN 緩存
└─ 否 → 繼續(xù)
子域名無(wú)法訪問(wèn)？
└─ 檢查主域名 HSTS Preload 狀態(tài)
→ 為子域名配置 HTTPS 或換獨(dú)立域名
核心記憶點(diǎn)：
狀態(tài)碼選擇
HSTS 配置原則
# ? 逐步啟用（推薦）
add_header Strict-Transport-Security "max-age=86400"; # 1天測(cè)試
# 沒(méi)問(wèn)題后
add_header Strict-Transport-Security "max-age=31536000"; # 1年
# 確認(rèn)所有子域名都支持 HTTPS 后
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
# 極度確定后才 Preload
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
排查優(yōu)先級(jí)
先看 Network 面板 - 90% 的問(wèn)題這里能發(fā)現(xiàn)
檢查 HSTS 緩存 - chrome://net-internals/#hsts
用 curl 驗(yàn)證 - 排除瀏覽器緩存干擾
查服務(wù)器配置 - Nginx/Apache 配置文件
記住：遇到重定向問(wèn)題，先看 Network，再查 HSTS，最后改配置。
參考文章：原文鏈接?
?
該文章在 2025/11/3 15:39:12 編輯過(guò)
400 186 1886
