資訊專欄INFORMATION COLUMN
摘要：前言由于自己平時只做做，并沒有遇到太多跨域問題，今天通過幾個樣例模擬實現了幾種跨域方式。
前言
由于自己平時只做做demo，并沒有遇到太多跨域問題，今天通過幾個樣例模擬實現了幾種跨域方式。原文地址 傳送門
本文所有樣例靜態服務器基于nodejs實現，代碼親測可用。測試步驟如下：
1.為了實現跨域訪問的效果，需要下載http-server 作為一個服務器 npm install http-server。用來掛載靜態頁面 index.html 。（訪問http://127.0.0.1:8080 顯示index.html頁面）
2.運行node創建的靜態服務器node server (node搭建靜態服務向下翻)
說道跨域可能最先想到就時 jsonp ,實現原理為：同源策略只限制瀏覽器的行為而不限制js，所以可以將請求寫到 script 標簽中。關鍵代碼如下：
前端發出跨域請求數據后，服務端去解析該請求：
const data={...}
const callback = req.parse(req.url,true).query.callback
res.writeHead(200)
//最關鍵的一步，拼接回調函數和作為函數參數的數據data
res.end(`${callback}(${JSON.stringfy(data)})`)
瀏覽器接收到服務端返回的響應，由于發起請求的是script，相當于直接調用方法并傳入參數
具體實現案例（服務端代碼，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);
//回調原頁面上函數處理返回結果
res.end(`${callback}(${JSON.stringify(data)})`);
}).listen(3000, "127.0.0.1");
console.log("服務器已啟動...");
（前端）
JSONP解決Ajax跨域問題
如果是采用js原生，可以參考傳送門
CORS跨域實現CORS跨域的思想為：CORS通信和Ajax同源請求沒有區別，關鍵在于服務端的配置。要想實現CORS通信，服務端必須要設置一個自定義頭Access-Control-Origin:""來允許跨域訪問
（樣例僅做了一個最簡單的GET請求demo服務端代碼）
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實現跨域的優點是不但能實現 GET , POST 等簡單請求，還能實現 PUT 等非簡單請求跨域
ServerProxy服務器代理ServerProxy服務器代理實現跨域的核心思想是：將跨域請求操作發送給服務端，由服務端代為請求，然后將請求結返回過來
這里以獲取 CNode：Node.js專業中文社區 論壇上一些數據為場景。如通過 https://cnodejs.org/api/v1/to...，當時因為不同域，所以你可以將請求后端，讓其對該請求代為轉發。
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("服務器已啟動...");
postMessage
postMessage是HTML5新增的一項功能,postMessage() 方法允許來自不同源的腳本采用異步方式進行有限通信可以實現跨文本文檔，多窗口，跨域消息傳遞。
利用postMessage不能和服務端交換數據，只能在兩個窗口