首页技术文章正文

什么是跨域?VUE如何实现跨域?

更新时间:2021-10-19 来源:黑马程序员 浏览量:

IT培训班

什么是跨域?

“跨域”指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制,防止他人恶意攻击网站。

比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过JavaScript读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。


VUE如何实现跨域?

1、jsonp

原理:动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。


步骤:

(1)去创建一个script标签

(2)script的src属性设置接口地址

(3)接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。

(4)通过定义函数名去接收后台返回数据

//去创建一个script标签
var script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据function jsonpCallback(data){
//注意 jsonp返回的数据是json对象可以直接使用
//Ajax 取得数据是json字符串需要转换成json对象才可以使用。
//}


2、 CORS:跨域资源共享

原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求

限制:浏览器需要支持HTML5,可以支持POST,PUT等方法兼容ie9以上需要后台设置


Access-Control-Allow-Origin: * //允许所有域名访问,或者

Access-Control-Allow-Origin: HTTP://a.com //只允许所有域名访问


3、反向代理

4、window+iframe


 

猜你喜欢

在vue中v-for指令中key作用

v-show和v-if有什么区别?

VUE框架有哪些优点?

黑马程序员HTML&JS+前端开发课程

分享到:
在线咨询 我要报名