解决跨域的四种常见方法

解决跨域的四种常见方法

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.正向代理和反向代理
原理: 服务器间的访问是没有跨域问题的
方法: 建立自己的服务器,向别的服务器发送请求,获取数据后,返回给自己