這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 問題描述 最近遇到一個有意思的問題，項目中有一個地方，點擊需要跳轉到一個新的功能變數名稱地址 筆者使用a標簽做跳轉，跳是跳過去了，可是跳過去以後，反而打不開了，顯示403佛伯樂 蛤？ 大致這樣的代碼： <a href="http://abcdef ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
問題描述
- 最近遇到一個有意思的問題，項目中有一個地方，點擊需要跳轉到一個新的功能變數名稱地址
- 筆者使用a標簽做跳轉，跳是跳過去了，可是跳過去以後，反而打不開了，顯示403佛伯樂
- 蛤？
大致這樣的代碼：
<a href="http://abcdefg.com" target="_blank">點擊跳轉</a>
原因分析
- 既然跳過去出問題，那麼猜測是另外一個項目做了攔截
- 於是就去問問之前負責過
http://abcdefg.com這個項目的同事 - 被告知：
- 為了安全考慮，對
document.referrer進行了攔截判斷（前後端均可攔截操作） - developer.mozilla.org/zh-CN/docs/…
- 瞭解，既然直接跳過去，會把referrer帶著，那麼就想辦法，不帶著就行了
4種解決方案
from
推薦下麵的解決方案三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>from</title>
<!-- 解決方案一 禁內容referrer -->
<!-- <meta name="referrer" content="never"> -->
<!-- 解決方案二 不帶著referrer -->
<!-- <meta name="referrer" content="no-referrer"> -->
</head>
<body>
<!-- 解決方案三 a標簽加rel屬性控制 -->
<a href="http://127.0.0.1:5502/referrer.html" target="_blank" rel="noopener noreferrer">點擊跳轉</a>
<!-- 解決方案四 換成window.open並註入js執行代碼 -->
<!-- <button>點擊跳轉</button>
<script>
let btn = document.querySelector('button')
btn.onclick = () => {
window.open('javascript:window.name;', `
<script>location.replace("http://127.0.0.1:5502/referrer.html")<\/script>
`)
}
</script> -->
</body>
</html>
referrer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>referrer</title>
</head>
<body>
<h2></h2>
<script>
let referrer = document.referrer
let h2 = document.querySelector('h2')
if (referrer) {
h2.innerHTML = '不允許從別的地方跳轉過來訪問'
} else {
h2.innerHTML = '歡迎直接訪問'
}
</script>
</body>
</html>
可以用vscode的插件live serve跑一下兩個html文件，效果更佳
referrer的用處
- document.referrer這個欄位記錄了，項目是怎麼被打開的（是直接瀏覽器地址欄打開，還是從某個地方跳轉過來打開的）
- 可以統計訪問源，或做一些控制，或者可以返回到訪問源
A bad pen is better than a good memory...
本文轉載於:
https://juejin.cn/post/7277026974005379107
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
