最近面試經(jīng)常遇到一個(gè)問題，就是什么是跨域向图，當(dāng)時(shí)完全沒答上來泳秀，也沒有多少準(zhǔn)備”昊Γ現(xiàn)在看來我實(shí)在是追悔莫及，原來CORS這么簡單嗜傅！
廢話少說金句，咱們先來看看CORS究竟是怎么實(shí)現(xiàn)的吧。
- 首先吕嘀，CORS的原理是：
CORS只需要向響應(yīng)頭header中注入Access-Control-Allow-Origin违寞，這樣瀏覽器檢測到header中的Access-Control-Allow-Origin，則就可以跨域操作了（同源策略不生效）币他。
Cross-Site Resource Sharing : 跨域資源共享坞靶。
因此我們首先要分清楚，什么是跨域蝴悉。
跨域即：服務(wù)端和客戶端的協(xié)議、域名瘾敢、端口三者不一致的情況下拍冠，我們需要繞開瀏覽器的同源機(jī)制去實(shí)現(xiàn)資源上的訪問。
我們可以簡單用前后端（html前端+node后端）來模擬一下操作簇抵。
- 在本地寫一個(gè)html頁面
<html>
<body>
<div class="title"></div>
</body>
<script>
async function fetchData() {
// Fetch 請求
let url = 'https://LightpinkObviousScientist--five-nine.repl.co' //這里需要根據(jù)repl分配到的url去自行更改庆杜，看第3點(diǎn)
let options = {
method: 'GET',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;chartset=UTF-8'
}
// 因?yàn)槭莋et請求，所以不用帶body參數(shù)
};
let response = await fetch(url, options);
let responseOK = response && response.ok;
if(responseOK) {
let data = await response.json();
console.log(data);
document.getElementsByClassName('title')[0].innerHTML = JSON.stringify(data);
}
}
fetchData(); //直接調(diào)用異步方法
</script>
</html>
前端不用做太多工作（因?yàn)闉g覽器會(huì)幫我們自動(dòng)添加了origin字頭標(biāo)識(shí)請求的來源）碟摆，主要關(guān)鍵是在后端晃财。
- 其次我們做的工作的關(guān)鍵是：實(shí)現(xiàn)一個(gè)后端。
為了實(shí)現(xiàn)跨域典蜕，我們不可能使用localhost來作為服務(wù)器所在的地址（不然就都在同一個(gè)域名了断盛，跨啥跨呢，家里呆著好好交流吧）愉舔。并且钢猛，fetch方法只能對(duì)http/https的url進(jìn)行操作。
因此我用了https://repl.it/languages/express這里的線上express平臺(tái)來運(yùn)行服務(wù)器轩缤。在index.js中輸入以下代碼點(diǎn)運(yùn)行就可以了命迈。
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors'); //引入cors庫
const app = express();
// 因?yàn)閏ors是中間件，因此我們要先調(diào)用app.use裝載中間件火的，以便后面我們的請求都能夠經(jīng)過cors到達(dá)不同的路由
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.json({msg: 'This is CORS-enabled for all origins!'}) //這里就是返回給客戶端的json啦
});
app.listen(3000, () => console.log('server started'));
-
最后壶愤，我們前端的頁面就能夠成功顯示啦！
image.png
可以看到馏鹤，服務(wù)端返回的消息有'Access-Control-Allow-Origin:*'這一行征椒，代表服務(wù)端允許所有網(wǎng)站的跨域訪問。
