浏览器同源策略和跨域

荔枝要好学

已于 2024-09-20 21:45:37 修改

阅读量836

点赞数 18

文章标签：前端

于 2024-09-20 21:34:47 首次发布

本文链接：https://blog.youkuaiyun.com/qq_64039411/article/details/142389058

版权

同源:

什么是同源:如果两个页面的协议，域名和端口都相同，则两个页面都具有相同的源。

在Http请求中http://www.test.com/index.html，默认是80端口。

在这里插入图片描述

什么是同源策略

同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。

MDN官方给定的概念:同源策略限定了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解: 浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C之间，进行资源的交互。
- 无法读取非同源网页的 Cookie、LocalStorage 和 IndexDB
- 无法接触非同源网页的 DOM
- 无法向非同源地址发送 Ajax 请求

跨域:

什么是跨域

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。

出现跨域的根本原因: 浏览器的同源策略不允许非同源的 URL之间进行资源的交互

跨域例子:

网页: http://www.test.com/index.html
接口: http://www.api.com/userlist
浏览器对跨域请求的拦截

注意:浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦载无法被丙面获取到!
如何实现跨域数据请求:

现如今，实现跨域数据请求，最主要的两种解决方案，分别是JSONP 和CORS。

JSONP:出现的早，兼容性好(兼容低版本E)。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方式。缺点是只支持 GET 请求，不支持 POST 请求。

CORS:出现的较晚，它是W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET和 POST 请求缺点是不兼容某些低版本的浏览器。
JSONP:
JSONP(JSON with Padding)是JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
JSONP实现原理

由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的js脚本。

因此，JSONP的实现原理，就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

案例:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function success(data) {
    console.log('拿到了Data数据');
    console.log(data);
  }
</script>
<script src="./js/getdata.js"></script>
</body>
</html>
```
getdata.js
```
success({name: 'zs', age: 20})
```
上面示例，我们将函数的调用从页面调用抽到了一个单独的js文件，这样我们单独定义一个函数，然后在js文件中来调用这个函数。

思考：

这个getdata.js这个文件是放到我们计算机本地的，假如这个文件并没有在我们自己的电脑上，而是在一台服务器上放着，要调用什么函数是不知道的，到底调用的是success还是abc方法我们不清楚，没有这个函数肯定就会调用失败。这个时候我们可以通过callback指定调用函数
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function success(data) {
    console.log(data);
  }
</script>
<script src="./js/getdata.js?callback=success"></script>
</body>
</html>
```
JSONP的缺点

由于JSONP 是通过<script>标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求不支持 POST请求。

注意: JSONP 和 Ajax 之间没有任何关系不能把JSONP 请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest 这个对象。