跨域与同源策略

花铛

已于 2025-02-13 16:35:54 修改

阅读量668

点赞数

CC 4.0 BY-SA版权

分类专栏： HTTP 文章标签： HTTP

于 2019-03-13 11:25:36 首次发布

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/87890804

HTTP 专栏收录该内容

11 篇文章

订阅专栏

域名：

域名由英文字母、数字、英文点、英文横杠组成，不区分大小写。每一个点分隔开的部分称为一个标号，每一个标号都不能超过 63 个字符。标号的级别从左到右由低到高，因此最右边的标号称之为顶级域名，次右边的域名称之为二级域名，再左边的域名称之为三级域名。

其实域名的完整写法应该是顶级域名后面再加一个点，这个点就是根。

在这里插入图片描述

同域和不同域：

https（协议）://www.imooc.com（域名）:443（端口号）/course/list（路径）。

协议、域名、端口号都一样，就是同域；只要有任何一个不一样，就是不同域。

同不同域与路径无关。

跨域与同源策略：

跨域：向一个域发送请求，如果要请求的域和当前域是不同域，就是跨域。

跨域请求：不同域之间的请求，就是跨域请求。

同源策略：跨域请求会被阻止，是因为浏览器本身的一种安全策略，同源策略。不同协议、域名、端口号的客户端脚本在没有明确授权的情况下，不能读写对方资源。

不允许跨域访问并非是浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。

<script>、<iframe>、<link>、<a> 、<img>等标签都可以加载跨域资源。

// 同域
const xhr = new XMLHttpRequest()
xhr.addEventListener('readystatechange', () => {
	if (xhr.readyState !== 4) return 

	const str = xhr.responseText
	console.log(str);
})
xhr.open('get', './index.json', true) // 请求的是本地的一个 JSON 文件
xhr.send(null)

请添加图片描述

// 不同域：会产生跨域，请求被浏览器阻止
const xhr = new XMLHttpRequest()
xhr.addEventListener('readystatechange', () => {
	if (xhr.readyState !== 4) return 

	const str = xhr.responseText
	console.log(str);
})
xhr.open('get', 'https://www.imooc.com:443/course/list', true)
xhr.send(null)

请添加图片描述

解决跨域：

通过 JSONP 跨域：

JSONP 是一种非正式传输协议，该协议的一个要点就是允许用户以参数的形式将 callback 传递给服务端，然后服务器端返回数据时会将这个 callback 作为函数名来包裹住 JSON 数据。

JSONP 的原理：<script> 标签跨域不会被浏览器阻止，JSONP 主要就是利用 <script> 标签加载跨域资源。

JSONP 的优点：浏览器的支持度好，古老的浏览器都可以支持；缺点：JSONP 只支持 GET 请求。

<script>
	 var script = document.createElement('script');

	 // 以参数的形式将 callback 传递给服务端
	 script.src = 'https://www.imooc.com/api/http/jsonp?callback=handleResponse';
	 document.body.appendChild(script);
	
	 // 声明 callback 回调函数，服务端返回数据后会自动执行
	 var handleResponse = res => {
		console.log(res);
	 }
</script>

请添加图片描述
访问 https://www.imooc.com/api/http/jsonp?callback=handleResponse 可以看到这个接口返回的数据。