解決跨域的四種常見方法

解決跨域的四種常見方法

1.cors跨域 響應頭的方式

res.writeHead(200, {
    "content-type": "text/html;charset=utf-8",
    // "Access-Control-Allow-Headers":"*",//請求頭跨域
    "Access-Control-Allow-Origin": "*",

    //  cors跨域
});

2.jsonp
目的:為了讓所有的人都能去訪問 慎用
原理:超鏈接(href) 表單(action) 圖片(src) script(src) 不考慮跨域問題,用服務器地址代替路徑
使用方法: 1)服務端配合前端,res.wirte()寫前端規定的函數名 2)前端發送數據時,發送回調函數,服務端處理數據后,直接執行函數名

script的舉例

前端

var script = document.createElement("script");
script.src = "http://localhost:4008?a=3&b=4";
document.body.appendChild(script);
// 如果script的src指向服務端，服務端中write內容將是這個script執行的腳本


function getRes(res) {
    console.log(res);
} 

服務端:

var http=require("http");
var querystring=require("querystring");
var server=http.createServer((req,res)=>{
    req.on("data",_data=>{
        
    });
    req.on("end",()=>{
        var obj=querystring.parse(req.url.split("?")[1]);
        res.writeHead(200,{"content-type":"text/html;charset=utf-8"});
        // res.write("var a=3;");
        // res.write("var b=4;");
        // res.write("console.log(a+b);");  使用這種方法,服務端寫好腳本,前端收到消息,就會執行,用處很多,自己體會
        var sum=Number(obj.a)+Number(obj.b)
         res.write("getRes("+sum+")");  //執行前端的getRes函數,處理后數據傳參過去
        res.end();
    })
});
server.listen(4008);

3.webSocket
原理:通信前發送xml信息，服務解析 符合條件的域名,允許訪問 很多網站會有crossdomain.xml文件,這里不說那些網站了,自己去找找

var script = document.createElement("script");
script.src =
    "https://sp0.*****.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=morty&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback"; //json改變script的src地址指向
document.body.appendChild(script);

function callback(obj) {
    console.log(obj);
}

4.正向代理和反向代理
原理: 服務器間的訪問是沒有跨域問題的
方法: 建立自己的服務器,向別的服務器發送請求,獲取數據后,返回給自己