客户端请求服务大概流程
跨域请求
同源组策略:(同源:同协议,同域名(主机),同端口)Ajax请求地址与当前页面的地址必须得是同协议,同域名,同端口,这样才可以正常发送ajax请求,若这三者有任何一个不一样,则判定此次请求是跨域请求,浏览器会阻止这个请求并且在控制台报错。
跨域的解决方式:CORS,服务器反向代理,JSONP,ajax。
ajax解决跨域:(node解决跨域问题:服务器反向代理)
server.all("*",function(req,res,next){
res.header("Access-Control-Allow-Origin","*");
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);
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);
}
let script = document.createElement("script");
script.setAttribute("src","请求路径?callback=fn&...");
oBody.appendChild(script);