一、什么是同源策略？
同源策略限制從一個源加載的文檔或者腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的關鍵的安全機制。非同一個源的定義：
- 不同協議，https 和 http，如 https://www.baidu.com 和 http://www.baidu.com
- 不同端口，如 http://127.0.0.1:8080 和 http://127.0.0.1:8090
- 不同域名，如 a.com 和 b.com
二、什么是跨域？跨域有幾種實現形式？
跨域就是不同源的資源之間的交互。正是因為同源策略，才會出現跨域這種問題。跨域的實現方式有：
- JSONP
- CORS
- 降域
- postMessage
三、JSONP 的原理是什么
利用 html 的 script 標簽可以引入其他 JS 資源而且不引起跨域問題，原理是 JS 是被下載到當前瀏覽器環境執行，所以就不算跨域，就像平常通過 cdn 引入 jQuery 一樣。因此，我們可以通過這種方式，讓后端返回數據，具體流程如下：
- 定義數據處理函數 _fun
- 創建 script 標簽，src 的地址執行后端接口，最后加個參數 callback = _fun
- 服務端在收到請求后，解析參數，計算返還數據，輸出 fun(data) 字符串。
- fun(data) 會放到 script 標簽做為 js 執行。此時會調用 fun 函數，將 data 做為參數。
四、CORS 是什么？
CORS（Cross-Origin Resource Sharing）跨域資源共享，是一種允許 Web 應用服務器進行跨域訪問控制機制，從而使跨域數據傳輸得以安全進行。具體通過在響應頭的 Header 里面加上 Access-Control-Allow-Origin屬性，允許相應的源地址訪問來實現。
五、演示三種以上跨域的解決方式
1. JSONP
通過 node + express 來搭建本地服務器，實現 JSONP 效果。 JS 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSONP 演示</title>
</head>
<body>
<button id="getData">點擊獲取數據</button>
<div>
<h1>數據展示</h1>
<p id="dataShow"></p>
</div>
<script>
const getData = document.getElementById('getData')
getData.addEventListener('click', (e) => {
const jsonpTag = document.getElementById('jsonp')
if(jsonpTag){
jsonpTag.remove()
}
let scriptTag = document.createElement('script')
scriptTag.src = 'http://127.0.0.1:3000/jsonp?callback=jsonp'
scriptTag.id = 'jsonp'
document.querySelector('body').appendChild(scriptTag)
})
function jsonp(data) {
const dataShow = document.getElementById('dataShow')
const str = JSON.stringify(data)
dataShow.innerHTML = str
}
</script>
</body>
服務端代碼
const express = require('express')
const Mock = require('mockjs')
const router = express.Router()
router.use('/', (req, res, next) => {
console.log('jsonp')
next()
})
router.get('/', (req, res, next) => {
const data = Mock.mock({
'list|1-10': [{
'id|+1': 1,
'name|1-3': '@FIRST'
}]
})
const callback = req.query.callback
const resData = `${callback}(${JSON.stringify(data)})`
res.end(resData)
})
module.exports = router
實際演示
可以看到這請求和相應不是同源的，因為端口不同。
JSONP 演示
2.CORS
客戶端代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CORS 演示</title>
</head>
<body>
<button id="getData">點擊獲取數據</button>
<div>
<h1>數據展示</h1>
<p id="dataShow"></p>
</div>
<script>
const getData = document.getElementById('getData')
const dataShow = document.getElementById('dataShow')
getData.addEventListener('click', (e) => {
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:3000/cors', true)
xhr.send()
xhr.addEventListener('load', (data) => {
if (xhr.status === 200) {
const resData = data.target.response
dataShow.innerHTML = resData
}
})
})
</script>
</body>
</html>
服務端代碼
const express = require('express')
const router = express.Router()
const Mock = require('mockjs')
router.use('/', (req, res, next) => {
console.log('cors')
res.append('access-control-allow-origin', 'http://127.0.0.1:8090')
// res.append('withCredentials', true)
next()
})
router.get('/', (req, res, next) => {
const data = Mock.mock({
'list|1-10': [{
'id|+1': 1,
'name|1-3': '@FIRST'
}]
})
res.json(data)
})
module.exports = router
實際演示
CORS 演示
3. 降域
假設現在我有兩個域名 a.sub.com 和 b.sub.com，但實際上指向的是同一個 ip 地址和 端口，盡管如此，因為域名不同，依舊是非同源，為了解決這個問題，通過window.domain來降域，解決跨域問題。
修改 hosts 文件
修改 hosts
兩個 html 文件，里邊使用 iframe 演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>網站 a</title>
<style>
iframe {
background-color: #eee;
}
</style>
</head>
<body>
<h1>使用降域實現跨域</h1>
<input type="text" placeholder="http://a.sub.com:8090/a.html">
<iframe src="http://b.sub.com:8090/b.html" frameborder="0"></iframe>
<script>
document.domain = 'sub.com'
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>網站 b.com</title>
</head>
<body>
<h1>這是網站 b</h1>
<script>
document.domain = 'sub.com'
</script>
</body>
</html>
在未使用window.domain降域之前，在網站 a 里是無法訪問網站 b 的節點的，如下：
為降域，獲取節點失敗
而加上之后：
降域成功演示
