浅谈跨域
2022-2-21 zgn
- 导航
- 同源
- 跨域
- 跨域方法 ： 1. CORS 跨域 2. JSONP 跨域
一、同源概念
- 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
- 如果两个 URL 的 协议、域名、端口号 都完全一致的话，则这两个 URL 是同源。
// 在任意一个网站的控制台输入
window.origin
// 在任意一个网站的控制台输入
location.origin
- 这两种方法都可以得到当前源 源=协议+域名+端口号
二、跨域
-
出于安全性，浏览器限制脚本内发起的跨源HTTP请求（同源策略），但是如果是开发者自己，自己编写的两个不同源网站也会受到限制，或者等等其他原因，我们需要访问其他源的数据，就需要执行跨域操作，这就是跨域
-
同源策略可以成功的请求数据，但是浏览器会阻止数据响应。
三、跨域的方法
- 第一种方法非常的简单，我们只需要在服务器返回代码中指定允许访问的网站即可
Access-Control-Allow-Origin:'这里写你允许访问数据的源'
- 这样跨域的问题就得到了解决，但是CORS又会有一个新的问题 IE的兼容性不好
- 第二种方法就是 JSONP
-
当我们的网页需要跨域，但是浏览器不支持CORS时，必须使用另一种方法，这种方法就是JSONP
-
它的优点是 兼容IE，可以跨域
-
缺点是由于用到了script标签，所以只能发送get请求，不支持 post
其实他的原理非常简单，主要是利用了html script标签的特性，在长久的工作中人们发现，同源策略虽然限制了不同源直接的数据访问，但是script标签可以通过路径引用而使用其他源的数据。
- 实现步骤：
- 在提供数据网站的服务器中，将数据写入到js文件，将数据保存为对象或回调函数，当另一个网站访问时，返回这个js文件
- 在请求数据的网站的js文件中使用script调用原网站的js文件地址，插入到页面中，调用这个对象或回调函数，就可以查询到数据
