跨域

84 阅读2分钟

同源策略

一个请求至少由三部分组成:协议、IP、端口。
同源策略是浏览器端的安全策略。它要求页面地址和页面中的亲求地址、协议、IP、端口三者必须一致,则为同源。
当我们在一个页面中,向服务器发送其他请求时,页面地址和请求地址、协议、IP、端口三者中有一个不一致,则为跨域。

跨域的解决方案

JSONP
//前端
$.ajax({
    url:'http://192.168.14.17:3000/students',
    type:'get',
    dataType:'jsonp',  //解决跨域
    success(msg){
    
    }
})

//后端
router.get('/',async function(req,res,next)
    const data = await getStudents(req.query);
    res.jsonp(data);  //解决跨域
    );

缺点:只能解决get请求类型的跨域。
Cors

var allowCrossDomain = function(req,res,next){
    //设置允许跨域访问的请求源(*表示接收任意域名的请求)
    res.header("Access-Control-Allow-Origin","*");
    //设置允许跨域访问的请求头
    res.header("Access-Control-Allow-Headers","x-Requested-with,Origin,Content-Type,Access,Authorization");
    //设置允许跨域访问的请求类型
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    //同意cookie发送到服务器(如果要发送cookie,Access-Control-Allow-Origin不能设置为*)
    res.header('Access-Control-Allow-Credentials','true');
    next();
    };
    app.use(allowCrossDomain);

代理服务器
当我们请求访问某个页面或者接口的时候,被访问的服务器有特定的权限,不允许直接被访问,此时我们就需要借助代理服务器帮助我访问到相应数据。
1.自己搭建一个服务器
2.在自己搭建的服务器中调用服务器方法app.use(设置请求接口,createProxyMiddleware({ target: ‘japi.juhe.cn/qqevaluate’, changeOrigin: true })
【createProxyMiddleware是第三方模块的方法,里面第一个参数是目标的服务器,第二个参数是固定值设置】
3.代理服务器基本搭建完毕之后直接调用即可。出现跨域问题,需要我们把本地的共享资源开放,放到中间件的响应内容的response setHeader()的方法。