前端解决跨域的三种方式

所谓跨域问题,主要因为浏览器的安全策略是同源策略,所谓同源是指域名,协议,端口完全相同,只有同源的地址才可以相互

请求。

如存在地址http://www.example.com/login.html,通过以下对比加深同源认识

前端解决跨域的三种方式_第1张图片

1.jsonp方式

jsonp是一种借助于 script 标签发送跨域请求的方式。

由于上述方式无法传递参数,所以我们采用下面的方式进行跨域操作


    
    

服务器端代码如下

app.get('/',function(req,res){
    //前端的回调函数名函数名
   let fn1=req.query.callback;
   let data={username:'jack',pwd:'123'};
   let result=`fn1('${JSON.stringify(data)}')`;
   res.send(result);
});

2.CORS 跨域资源共享

只需要在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头,表示这个资源是否允许指定域请求。

// 允许远端访问
header('Access‐Control‐Allow‐Origin','*');

3.中转服务器

中转服务器是指当无法直接从前端获取到指定服务器地址的数据时,可以先访问自己的服务器,然后让自己的服务器去访问指定服务器地址的数据,这是因为后台服务器之间没有跨域问题。

在自己服务器书写如下代码

首先导入http协议

let http=require("http");

写指定服务器地址,如

let url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=java&code=utf-8&json=1&p=3&req=2";

向指定服务器发送请求

//向第三方服务器发起请求
function getInfoFromServer(url,fn){
    let msg=[];
    http.get(url,res=>{
        //接收数据
        res.on('data',chuck=>{
            msg.push(chuck);
        });
        res.on('end',()=>{
            fn(msg);
        });
    });
}

接下来进行数据的相关操作

你可能感兴趣的:(前端)