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

什么是跨域？

“跨域”指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对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+前端开发课程