跨域问题及解决方法

客户端请求服务大概流程

跨域请求

同源组策略：（同源：同协议，同域名（主机），同端口）Ajax请求地址与当前页面的地址必须得是同协议，同域名，同端口，这样才可以正常发送ajax请求，若这三者有任何一个不一样，则判定此次请求是跨域请求，浏览器会阻止这个请求并且在控制台报错。

跨域的解决方式：CORS，服务器反向代理，JSONP，ajax。

ajax解决跨域：(node解决跨域问题：服务器反向代理)

	server.all("*",function(req,res,next){
    
    
	    //设置允许跨域的域名，*代表允许任意域名跨域
	    res.header("Access-Control-Allow-Origin","*");
	    //允许的header类型
	    res.header("Access-Control-Allow-Headers","content-type");
	    //跨域允许的请求方式 
	    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
	    if (req.method.toLowerCase() == 'options')
	        res.send(200);  //让options尝试请求快速结束
	    else
	        next();
	})

JSONP原理：一种解决跨域问题的技术，不依赖于真实的网络环境。ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

JOSNP工作机制：动态创建一个script标签，并设置它的src属性向服务器发送一次http请求，并提前声明好一个回调函数，回调函数的函数名利用callback请求参数传递给后端，后端接收到来自前端的请求后，获取callback请求的请求参数并拼接一个调用函数的JS代码段，并将要返回给前端的数据以实参的形式存在，前端接收到来自后端的响应后，会将后端的返回内容当作JS代码来执行，即调用一个函数，并用一个形参来接收后端向要传递过来的数据。

let oBody=document.querySelector("body");
function fn(data){
    
    
    console.log(data);//输出后端返回的数据
}

 // 动态创建script
 let script = document.createElement("script");
//向后端发送请求
script.setAttribute("src","请求路径?callback=fn&...");
// 将script插入到body后面
oBody.appendChild(script);