跨域的几种方式及前后端的处理?
- JSONP
- 服务器作为中转
- 服务器允许跨域
服务器如何允许跨域?
- 服务器端的设置:
app.all("*",function(req,res,next){
//设置响应的头部信息
res.header("Access-Control-Allow-Origin","*");
//支持哪些响应方式
res.header("Access-Control-Allow-Methods","POST,PUT,GET,OPTIONS,DELETE");
// 响应头支持content-type
res.header("Access-Control-Allow-Headers","content-type");
next();
})
- 前端的设置:
1、GET方式
var xhr=new XMLHttpRequest();
xhr.open("get","http://127.0.0.1/sum?a=1&b=2");
xhr.send(null);
xhr.onload=function(){
if(xhr.status==200){
alert(xhr.responseText);
}
}
2、POST方式
需要额外设置请求头:
①xhr.setRequestHeader("content-type","application/json");
*服务端接收:
app.use(bodyParser.json())
*前端发送数据:
xhr.send(json字符串)
②xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
*服务端接收:
app.use(bodyParser.urlencoded({
extended:false//false不深度解析 ,true深度解析 。
}))
*前端发送数据:
xhr.send(urlencoded字符串);