CORS 中间件解决接口跨域问题

目录

1. 接口跨域问题

2. 跨域问题解决方案

3. 使用 CORS中间件 解决跨域问题

4. CORS 具体介绍

5. CORS 的注意事项

6. CORS 响应头部 -Access-Control-Allow-Origin 

7. CORS 响应头 - Access-Control-Allow-Headers     

8. CORS 响应头部 - Access-Control-Allow-Methods

9. CORS 请求的分类

        9.1 简单请求

        9.2 预检请求

        9.3 简单请求与预检请求的区别

---

1. 接口跨域问题

        报错图示：

        出现该报错，就是出现了跨域问题

        编写的 GET 和 POST 接口，存在一个很严重的问题：不支持跨域请求

2. 跨域问题解决方案

        1. CORS（主流解决方案，推荐使用）

        2. JSONP（有缺陷的解决方案：只支持 GET 请求）

3. 使用 CORS中间件 解决跨域问题

        介绍：cors 是 Express 的一个第三方中间件。通过安装配置 cors 中间件，可以很方便的解决跨域问题

        使用步骤分为如下三部：

                1. 终端运行 npm install cors         安装中间件

                2. 使用 const cors = require('cors')        导入中间件

                3. 在路由之前调用 app.use(cors())        配置中间件

        注意：cors 中间件的调用必须写在路由之前

4. CORS 具体介绍

        CORS (Cross-Origin Resource Sharing, 跨域资源共享) 由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源

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

        图示：