博客

什么是跨域？

跨域问题：是浏览器为了

请求安全

而引入的基于

同源策略

的


安全特性


。当页面和请求协议、主机名、端口号不同时，浏览器则将判定其为跨域。注意：

跨域是浏览器的限制，而非服务器。


同源策略是浏览器一个非常重要的安全策略.

解决跨域：（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页面，实现跨域