跨域

Tue, 01 Oct 2024 00:00:00 +0800

一、什么是跨域？

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。

什么是同源策略？

同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送

二、常见的跨域场景

URL	说明	是否允许通信
www.domain.com/a.js
www.domain.com/b.js
www.domain.com/lab/c.js	同一域名，不同文件或路径	允许
www.domain.com:8000/a.js
www.domain.com/b.js	同一域名，不同端口	不允许
http://www.domain.com/a.js
https://www.domain.com/b.js	同一域名，不同协议	不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js	域名和域名对应相同ip	不允许
http://www.domain.com/a.js
http://x.domain.com/b.js
http://domain.com/c.js	主域相同，子域不同	不允许
http://www.domain1.com/a.js
http://www.domain2.com/b.js	不同域名	不允许

三、9种跨域解决方案

1、JSONP跨域

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
1）原生JS实现：

 <script>
 var script = document.createElement('script');
 script.type = 'text/javascript';

 // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
 script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
 document.head.appendChild(script);

 // 回调执行函数
 function handleCallback(res) {
 alert(JSON.stringify(res));
 }
 </script>

服务端返回如下（返回时即执行全局函数）：

跨域 on Last Stand

跨域

一、什么是跨域？

什么是同源策略？

二、常见的跨域场景

三、9种跨域解决方案

1、JSONP跨域