是指两个URL地址具有相同的协议、主机名、端口号。
是浏览器提供的一个安全功能。(没有浏览器,就没有同源策略)
浏览器同源策略的规定:不允许非同源的URL之间进行资源交互。
💡 非同源但能访问的场景 => img
和 script
的src
标签请求不受同源策略的限制
同源指的是两个 URL 的协议、主机名、端口号完全一致,反之,则是跨域。
出现跨域的根本原因: 浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
浏览器允许发起跨域请求。但跨域请求回来的数据,会被浏览器拦截,无法被页面获取到。
JSONP 出现较早 来自民间(非官方)
优点:
兼容性好(兼容低版本 IE)
缺点:
GET
请求底层实现原理:
使用了 <script> 中的src属性
原因:
<!-- script的src是请求一个js文件 -->
<script src="http://www.liulongbin.top:3009/api/getscript"></script>
<!-- 首先要先声明函数 -->
<!-- 函数虽然可以先调用后声明,但是是在同一个script标签中的 -->
<!-- 这里声明的函数是挂载到window上的 -->
<script>
function show(obj) {
console.log(obj)
}
</script>
<script src="接口/api/getscript2"></script>
callback
,自定义回调函数的名称:<script>
function myFn(data) {
console.log(data)
}
</script>
<script src="接口/api/jsonp?callback=myFn"></script>
<script>
function myJSONP(data) {
console.log(data)
}
</script>
<script src="接口/api/jsonp?callback=myJSONP**&username=Tt&age=18**"></script>
CORS 出现较晚 来自W3C 官方标准
优点:
GET、POST、PUT、DELETE、PATCH
等常见
的请求方式 。缺点 :
不兼容某些低版本浏览器
💡 结论:只要用到了 XMLHttpRequest 对象,发起的就是 Ajax 请求
概念:
CORS 技术需要浏览器和服务器同时支持,二者缺一不可。
原理:
服务器端通过 Access-Control-Allow-Origin
响应头,来告诉浏览器当前的 API 接口是否允许跨域请求。
响应头 | 可以访问的网站 |
---|---|
Access-Control-Allow-Origin: * | 所有的网站 |
Access-Control-Allow-Origin: http://www.baidu.com | 只有百度 |