資訊專欄INFORMATION COLUMN
摘要：前言由于自己平時只做做，并沒有遇到太多跨域問題，今天通過幾個樣例模擬實(shí)現(xiàn)了幾種跨域方式。
前言
由于自己平時只做做demo，并沒有遇到太多跨域問題，今天通過幾個樣例模擬實(shí)現(xiàn)了幾種跨域方式。原文地址 傳送門
本文所有樣例靜態(tài)服務(wù)器基于nodejs實(shí)現(xiàn)，代碼親測可用。測試步驟如下：
1.為了實(shí)現(xiàn)跨域訪問的效果，需要下載http-server 作為一個服務(wù)器 npm install http-server。用來掛載靜態(tài)頁面 index.html 。（訪問http://127.0.0.1:8080 顯示index.html頁面）
2.運(yùn)行node創(chuàng)建的靜態(tài)服務(wù)器node server (node搭建靜態(tài)服務(wù)向下翻)
說道跨域可能最先想到就時 jsonp ,實(shí)現(xiàn)原理為：同源策略只限制瀏覽器的行為而不限制js，所以可以將請求寫到 script 標(biāo)簽中。關(guān)鍵代碼如下：
前端發(fā)出跨域請求數(shù)據(jù)后，服務(wù)端去解析該請求：
const data={...}
const callback = req.parse(req.url,true).query.callback
res.writeHead(200)
//最關(guān)鍵的一步，拼接回調(diào)函數(shù)和作為函數(shù)參數(shù)的數(shù)據(jù)data
res.end(`${callback}(${JSON.stringfy(data)})`)
瀏覽器接收到服務(wù)端返回的響應(yīng)，由于發(fā)起請求的是script，相當(dāng)于直接調(diào)用方法并傳入?yún)?shù)
具體實(shí)現(xiàn)案例（服務(wù)端代碼，node.js）
const url = require("url");
require("http").createServer((req, res) => {
const data = {
x: 10
};
const callback = url.parse(req.url, true).query.callback
res.writeHead(200);
//回調(diào)原頁面上函數(shù)處理返回結(jié)果
res.end(`${callback}(${JSON.stringify(data)})`);
}).listen(3000, "127.0.0.1");
console.log("服務(wù)器已啟動...");
（前端）
JSONP解決Ajax跨域問題
如果是采用js原生，可以參考傳送門
CORS跨域實(shí)現(xiàn)CORS跨域的思想為：CORS通信和Ajax同源請求沒有區(qū)別，關(guān)鍵在于服務(wù)端的配置。要想實(shí)現(xiàn)CORS通信，服務(wù)端必須要設(shè)置一個自定義頭Access-Control-Origin:""來允許跨域訪問
（樣例僅做了一個最簡單的GET請求demo服務(wù)端代碼）
require("http").createServer((req,res)=>{
res.writeHead(200,{
"Access-Control-Allow-Origin":"http://127.0.0.1:8080"
})
res.end("這是來自端口3000的信息，收好了~")
}).listen(3000,"127.0.0.1")
（前端代碼）
cors實(shí)現(xiàn)跨域的優(yōu)點(diǎn)是不但能實(shí)現(xiàn) GET , POST 等簡單請求，還能實(shí)現(xiàn) PUT 等非簡單請求跨域
ServerProxy服務(wù)器代理ServerProxy服務(wù)器代理實(shí)現(xiàn)跨域的核心思想是：將跨域請求操作發(fā)送給服務(wù)端，由服務(wù)端代為請求，然后將請求結(jié)返回過來
這里以獲取 CNode：Node.js專業(yè)中文社區(qū) 論壇上一些數(shù)據(jù)為場景。如通過 https://cnodejs.org/api/v1/to...，當(dāng)時因?yàn)椴煌颍阅憧梢詫⒄埱蠛蠖耍屍鋵υ撜埱蟠鸀檗D(zhuǎn)發(fā)。
const url = require("url")
const http = require("http")
const https = require("https")
const server = http.createServer((req,res)=>{
const path = url.parse(req.url).path.slice(1)
if(path==="topics"){
https.get("https://cnodejs.org/api/v1/topics", (resp) => {
let data=""
resp.on("data",chunk=>{
data+=chunk
})
resp.on("end",()=>{
res.writeHead(200,{
"Content-Type":"application/json;charset=utf-8"
})
res.end(data)
})
})
}
}).listen(3000,"127.0.0.1")
console.log("服務(wù)器已啟動...");
postMessage
postMessage是HTML5新增的一項(xiàng)功能,postMessage() 方法允許來自不同源的腳本采用異步方式進(jìn)行有限通信可以實(shí)現(xiàn)跨文本文檔，多窗口，跨域消息傳遞。
利用postMessage不能和服務(wù)端交換數(shù)據(jù)，只能在兩個窗口