同源策略,跨域,解决跨域的方法 ,jsonp ,cors,代理服务器 - 前端笔记-一,同源策略 同源策略是什么?,为什么需要同源策略 1.同源策略就是: 如果两个页面拥有相同的协议,域名和端口,那么这两个页面就是同源,只有其中有一个不相同,就是不同源 2.同源...

学习笔记

点滴记忆
回忆过往
首页>> web前端 >>同源策略,跨域,解决跨域的方法 ,jsonp ,cors,代理服务器 - 前端笔记
一,同源策略 同源策略是什么?,为什么需要同源策略

1.同源策略就是:   如果两个页面拥有相同的协议,域名和端口,那么这两个页面就是同源,只有其中有一个不相同,就是不同源
2.同源策略三要素:同协议,同域名,同端口 
2.同源策略的目的 :为了保证用户信息安全,防止恶意的网站数据切奇,最初的同源策略是指:A网站在客户端设置Cookie,B网站不能访问 。随着互联网的发展同源策略也越来越严,在不同源的情况下是无法向非同源地址发送Ajax请求,如果请求,浏览器就会报错

二,跨域

跨域,就是发送不符合同源策略的请求,称为跨域

三,解决跨域的方法

1.使用jsonp方法解决跨域 jsonp就是通过动态创建script标签,请求一个地址,利用回调函数的方法接收返回值,从而达到跨域请求
    1.不只是script标签不受跨域的影响,但凡只要有src属性的标签都有跨域的能力,比如:<script>,<img>,<iframe>, 

    <!-- //通过script标签访问不同源地址,在地址栏传入一个函数名 -->
    <script src="http://127.0.0.1/admin?callback=fn"></script>
    <script>
        //通过定义全局变量的方式接受返回值
        function fn(con) {
            console.log(con);
        }
    </script>

2.CORS方法 , 就是在后台设置响应头,允许发送跨域请求
CORS:全称为 Cross-originresource sharing,即跨域资源共享,它允许浏览器向跨域服务器发送 Ajax 请求,克服了 Ajax 只能同源使用的限制。 
CORS方法,也是官方认证解决跨域的方法,主要是在后台设置响应头 这里展示一段node.js设置响应头方法
//通过中间件设置响应头
app.use((reqresnext=> {
    //设置只有本地域名可以访问,也可以设置 * 任意ip 都可以访问
    res.header('Access-Control-Allow-Origin''http://127.0.0.1/');
    //设置可以接收GET POST 请求 ,也可以设置其他请求方式
    res.header('Access-Control-Allow-Methods''GET,POST');
    next();
})

3.通过设置代理服务器的方法
代理服务器方法:
    A服务器   B服务器     A网页发送ajax请求 到A服务器    A服务器 发送请求 B服务器    B服务器在返回到 A服务器  A服务器在返回给 A网页
  都是一个套路吧,后台没有同源的限制,直接让后台访问接口 获取到数据在返回

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » 同源策略,跨域,解决跨域的方法 ,jsonp ,cors,代理服务器

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)