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页面,实现跨域

你可能感兴趣的:(面试专栏,前端)