同源策略和跨域_简述同源策略与跨域-CSDN博客

本文链接：https://blog.csdn.net/abraham_ly/article/details/114400117

一、同源策略

在了解同源资源策略之前，我们要先了解什么是同源，什么是非同源

1、什么是同源？

如果两个页面的协议、域名以及端口都相同，那么说明这两个页面具有相同的源，否则不具有相同的源。

2、什么是同源策略？

同源策略（Same origin policy）是由Netscape提出的一个著名的安全策略。它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

翻译成人话：浏览器规定，A 网站的 JavaScript脚本，不允许和非同源的网站 C 之间，进行资源的交互。例如：

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求

二、跨域

1、什么是跨域？

同源指的是两个URL地址的协议、域名、端口一致，反之就是跨域，或者说非同源网站之间进行交互就是跨域。

2、跨域的目的？

出现跨域的根本原因/目的其实就是：浏览器的同源策略它不允许非同源的URL地址之间进行资源的交互，但是在开发过程中，我们势必会出现两个非同源的网站进行资源的交互，那么为了解决这个问题，就需要用到跨域。

例如：下方两个URL就属于非通用的地址，那么如果需要进行资源交互，就必须使用跨域

网页：http://www.test.com/index.html

接口：http://www.api.com/userlist

3、拦截跨域请求

浏览器跨域拦截示意图：

在这里插入图片描述

注意：在我们未配置跨域请求时，浏览器自身允许我们发起跨域请求，但是跨域请求回来的数据会被浏览器拦截，所以无法呗页面获取到！

三、实现跨域请求

现如今，实现跨域数据请求，有两种主要解决方案，如下：

JSONP：出现的较早，兼容性好（兼容低版本的IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。但只支持GET，不支持POST……等其他类型的请求。
CORS：出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案，并且支持GET和POST……等其他类型的请求，但是它不兼容某些低版本的浏览器

1、JSONP跨域

（1）简介

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

（2）实现原理

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

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

（1）原生js实现jsonp

分析：

定义一个请求成功的函数
<script src="http://192.168.124.15:8080/jsonp?callback=success&name=zs&age=16"></script>发起GET请求
此时与路由匹配，let fn = req.query.callback;获取到的值为success（函数名），就是通过查询字符串参数的形式拿到函数名称
let data = JSON.stringify({ name: req.query.name, age: req.query.age });再通过查询字符串参数的形式从客户端拿到函数的这两个必要参数，并转换为json字符串
res.send(${fn}(${data}));通过格式化拼接字符串的方式调用函数，并将这个函数调用字符串响应到客户端
客户端将返回的调用函数字符串经过解析，变为真正调用函数的形式，在客户端直接调用

源码：

定义一个 success 回调函数

<body>
    <script>
      	// 定义一个请求成功的函数
        function success(data) {
            console.log(data.name);
            console.log(data.age);
        };
    </script>
</body>

通过 < script> 标签，请求接口数据

<body>
    <script>
      	// 定义一个请求成功的函数
        function success(data) {
            console.log(data.name);
            console.log(data.age);
        };
    </script>
  	<!--使用script的src属性来进行跨域，并将函数名称以及数据以查询参数的形式传递给服务器-->
    <script src="http://192.168.124.15:8080/jsonp?callback=success&name=zs&age=16"></script>
</body>

服务器收到请求并响应数据

// 导入模块
const express = require("express");
// 创建服务器
const app = express();

// 创建路由
app.get("/jsonp", function(req, res) {
    // 获取查询字符串中的callback函数
    let fn = req.query.callback;
    // 将callback后边的两个查询字符串参数封装为对象，并转换为json字符串
    let data = JSON.stringify({ name: req.query.name, age: req.query.age });
    // 使用格式化字符串的方式将查询字符串以函数调用的方式响应到客户端中
    res.send(`${fn}(${data})`);
});

// 服务器监听
app.listen(8080, "192.168.124.15", () => {
    console.log("服务器开启正常");
});

缺点：

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

注意：

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

（2）jQuery实现jsonp

jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，例如：

原理：

jQuery 中的 JSONP，也是通过 < script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 < script> 标签的方式，来发起 JSONP 数据请求。

在发起 JSONP 请求的时候，动态向 < header> 中 append 一个 < script> 标签；
在 JSONP 请求成功以后，动态从 < header> 中移除刚才 append 进去的 < script> 标签；

源码：

发起Ajax请求，并设置使用jsonp跨域

$.ajax({
    url: 'http://192.168.0.138:8080/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
    dataType: 'jsonp',
    // 发送到服务端的参数名称，默认值为 callback，如果设置了其他的，则应该使用设置的值来获取
    jsonp: 'callback',
    // 自定义的回调函数名称，默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
   	// 请求成功时响应的数据函数
    success: function(res) {
       console.log(res)
    }
 })

服务器响应数据

// 导入模块
const express = require("express");
// 创建服务器
const app = express();

// 创建路由
app.get("/jsonp", function(req, res) {
  	// 如果ajax请求时jsonp设置了值，那么就使用req.query.设置的值
    let fn = req.query.callback;
    console.log(fn);
    // 将callback后边的两个查询字符串参数封装为对象，并转换为json字符串
    let data = JSON.stringify({ name: req.query.name, age: req.query.age });
    // console.log(data);
    // 使用格式化字符串的方式将查询字符串以函数调用的方式响应到客户端中
    res.send(`${fn}(${data})`);
});

// 服务器监听
app.listen(8081, "192.168.124.15", () => {
    console.log("服务器开启正常");
});

注意：

默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称。当然，我们也可以使用jsonpCallback选项去修改回调函数的名称，同时我们也可以使用jsonp选项修改服务器获取callback时的字段为其他字段。

2、CORS跨域

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

1、简介

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

2、实现

注意：前端Ajax请求不需要修改，只在服务器中安装cors中间件，并使用即可

初始化配置文件
```
npm init -y
```
在Node环境下安装express和cors第三方包
```
npm i express cors
```

使用express创建并监听服务器

// 导入模块
const express = require("express");
// 创建服务器
const app = express();
// 服务器监听
app.listen(8024, "192.168.137.1", () => {
    console.log("服务器开启正常");
});

配置并使用cors跨域

// 导入模块
const express = require("express");
// 导入cors模块
const cors = require("cors");
// 创建服务器
const app = express();
// 使用cors跨域
app.use(cors());
// 服务器监听
app.listen(8024, "192.168.137.1", () => {
    console.log("服务器开启正常");
});