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

文章来自: 黑马程序员前端培训学院 http://web.itheima.com/news/20211019/104733.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值