跨域的几种方式及前后端的处理?

跨域的几种方式及前后端的处理?

  • 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字符串);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值