web学习笔记（五十一）

最新推荐文章于 2024-11-02 15:22:06 发布

shan33__

最新推荐文章于 2024-11-02 15:22:06 发布

阅读量1k

点赞数 30

分类专栏：笔记文章标签：学习笔记 node.js javascript 前端

本文链接：https://blog.csdn.net/shan33__/article/details/137236765

版权

笔记专栏收录该内容

83 篇文章 6 订阅

订阅专栏

2.4 使用 cors 中间件解决跨域问题

2.5 JSONP 接口

2.6 实现 JSONP 接口的步骤

1. post请求和get请求的区别

传参方式不同：get请求参数默认拼接到请求路径上，而post请求参数不会拼接到请求路径上，而会携带在请求体中。
参数大小不同：get请求参数有大小限制（是特定的浏览器及服务器对它的限制），请求参数大小一般在2k-8K之间，但是post一般没有大小限制，除非是服务器配置了最大请求体大小限制，或者网络设备可能对请求大小进行了限制。
安全性有所不同：post请求要比get请求更安全
速度不同：首页展示都是get请求，因为都是数据，速度快，登录都是post请求，更安全。get请求比post请求速度更快
缓存机制不同：get请求可以被浏览器缓存，以提高性能，但是post请求默认情况下不可以被缓存，因为post请求的结果可能会改变服务器上的资源状态。
幂等性：get请求时幂等的，就是执行重复的get请求不会对服务器端资源产生资源。post请求不是幂等性的，当重复执行相同的post请求可能会对服务器端资源产生多次修改。

2. CORS 跨域资源共享

2.1 什么是同源

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。当两个url的协议、域名、端口号三者有一个不一致时就发生了跨域现象。浏览器会对跨域请求进行拦截。

例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：

URL	是否同源	原因
http://www.test.com/other.html	是	同源（协议、域名、端口相同）
https://www.test.com/about.html	否	协议不同（http 与 https）
http://blog.test.com/movie.html	否	域名不同（www.test.com 与 blog.test.com）
http://www.test.com:7001/home.html	否	端口不同（默认的 80 端口与 7001 端口）
http://www.test.com:80/main.html	是	同源（协议、域名、端口相同）

2.2 什么是同源策略

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB（浏览器数据库）
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求

2.3 如何实现跨域资源共享

CORS（主流的解决方案，推荐使用）
JSONP（有缺陷的解决方案：只支持 GET 请求）

2.4 使用 cors 中间件解决跨域问题

cors（Cross-Origin Resource Sharing，跨域资源共享）是 Express 的一个第三方中间件。由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。

浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制。

运行 npm install cors 安装中间件
使用 const cors = require('cors') 导入中间件
```
let cors = require('cors');//导入
```
在路由之前调用 app.use(cors()) 配置中间件
```
app.use(cors())//配置
```

2.5 JSONP 接口

JSONP（JSON with Padding）是一种跨域数据请求技术，它允许在不受同源策略限制的情况下从其他域获取数据。JSONP通过动态创建<script>标签来实现跨域请求，利用回调函数来接收数据。JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象。JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求。