1、跨域知识

什么是跨域?

跨域问题:是浏览器为了请求安全而引入的基于同源策略安全特性。当页面和请求协议、主机名、端口号不同时,浏览器则将判定其为跨域。注意:跨域是浏览器的限制,而非服务器。
同源策略是浏览器一个非常重要的安全策略.

解决跨域:(CORS、反向代理[reverse proxy]、jsonp等)

CORS:
cors是目前应用最广泛的,使用方法是服务器端/后端通过接口响应头中添加access-control-allow-*头,告知浏览器通过此请求。只需要服务器端/后端支持即可,不涉及前端工作。
反向代理:
依赖同源服务器端将请求做一个转发处理,将跨域请求换成同源请求,需服务器端/后端支持,前端只需要换成同源接口

前端本地开发代理:

module.export = {
	devserver: {
		https: true,
		proxy: {
			'^api': {
				target: 'http://www.baidu.com/XX'
				changeOrigin: true
			}
		}
	}
}

jsonp:
浏览器加载jsvascript资源时不受同源策略的影响,通过jsonp将请求转化为script元素,通过返回的函数进行回调从而达到跨域。
注意:jsonp仅支持GET请求
具体实现方式:
1、全局注册一个函数

window.getNumber = (num) => {
	console.log(num)
}
getNumber(12)

2、有一个URL:https://passport.baidu.com/passApi/js/wrapper.js?cdnversion=1680513612751&_=1680513612156
3、生成一个script标签并将上述url插入到该script标签的src中

<script type="text/javascript" src="https://passport.baidu.com/passApi/js/wrapper.js?cdnversion=1680513612751&_=1680513612156"></script>

4、服务器端构造一个javascript函数调用表达式并返回

冷知识:
postMessage:有A、B两页面,在A页面通过iframe嵌入B页面,实现跨域

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值