浏览器同源策略与跨域-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43388031/article/details/129990837

文章详细介绍了同源策略及其限制，包括对cookie、localStorage、DOM及Ajax的影响。接着讨论了四种跨域方案：JSONP、CORS（包括预检请求）、window.postMessage以及在Vue框架中使用的proxy代理。每种方法都有其优缺点和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同源策略

protocol,domain,port三者必须相同

如果想深刻理解每个方案，推荐看以下两个链接，大佬写的非常详细，这里只重点排一下个人前端可能用的比较多的方案

利用 html中的script src标签加载其他源的数据

（href,src,link请求的图片、视频等都不存在跨域问题，经过ajax请求得数据才存在跨域问题）

<body>
	<script type="text/javascript">
		function f(data){
			alert(data)
		}
	</script>
	<script src="其他源?callback=f"></script>
</body>

优点：简单兼容性好

缺点：

后台修改响应头Access-Control-Allow-Origin，开启CORS

简单请求

复杂请求

非简单请求就是复杂请求，在正式通信之前，增加一次HTTP查询请求，称为"预检"请求，,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。

头信息必须要有的字段

主流浏览器 ie8

可解决：

使用proxy代理，本质上还是cors跨域

（项目中常用）