当前位置:  主页 > 前端培训动态 > 前端培训中的同源策略与跨越请求

前端培训中的同源策略与跨越请求

发布日期:2020-02-07

在Vue项目中 使用ajax去请求 后端服务器接口,这个时候 因为浏览器 有一个同源策略的限制 会限制我们的ajax 去请求后端服务器的接口,所以最终请求不会成功比如下面案例:

Vue项目 :http://127.0.0.1:8080/
   

后端服务器:http://127.0.0.1:3000/list

现在在vue项目中写ajax请求后端服务器地址

查看浏览器看看效果:

这个时候 可以看到报错,报错的意思是http://127.0.0.1:3000/list 与 http://127.0.0.1:8080/ 不是同一个服务器 不能访问资源 ,这个就是浏览器的同源策略,下面我们看看同源策略的规律

浏览器的同源策略规则

同源指的同一个服务器,同源策略表示 在同一个服务器上ajax请求 是没有限制的,如果 Ajax请求的地址不是自身的服务器的 是其他服务器,这个时候浏览器同源策略 就会限制 这个请求的发送,限制的原因就是为了提高安全性。

怎么判断是否是同源的:协议、域名、端口号 都要相同这个时候就是同源 就是同一个服务器
https://www.a.com 和 http://www.a.com 不同源 因为协议不同 所以算2个服务地址
http://www.b.com 和 http://www.b.cn  不同源 因为域名不同 所以算2个服务地址

同源策略限制:
1.  ajax只能访问同源 数据,不能访问不同源数据
2.  cookie操作 只能操作同源的,不能操作不同源的
3.  dom操作 只能操作同源的,不能操作不同源

前端培训中要学到的跨域请求

同源策略导致ajax不能访问 其他服务器的数据,但是在正常开发中经常要请求其它服务器数据,这个时就要用到跨域请求技术,所以 我们就说2种常见的跨域方法:cors 和 jsonp

----1.cors跨域:这种跨域只需要后端开发人员 在服务器上设置 响应头就行,设置好以后 浏览器就知道 我们的服务器是开放的,它就不会限制其它 服务器的访问,下面是cors跨域的设置方法

后端服务器:http://127.0.0.1:3000/list ,在list接口前 让后端开发人员加上cors代码就行

再次查看vue 发现已经可以请求到数据了

-----2.jsonp不是语言 ,jsonp是一种解决跨域的方案名称, 这种跨域原理 是利用 Script标签的src 可以访问 其他服务器的数据 来实现的一种跨域 我们叫这种跨域 叫做jsonp,这种跨越也需要后端人员配置

语法是:


---------1.原生js实现jsonp

--------2.jquery 实现jsonp

注意:以上2种是前端培训中需要学到2种常见跨越 cors 与 jsonp 都需要后端进行配置的

+相关文章推荐+