解决问题之跨域请求

https://www.bilibili.com/video/BV1oJ411473Y?p=8
1.jsonp
2.webpack 的代理
3.webpack的plugin
第一步安装插件npm install -S webpack-dev-middleware

把后端跟前端绑在一起

4.在后端配置cors
使用预检请求，也是cors的一种方式，是在发送实际请求之前，浏览器发送的一种 CORS（跨域资源共享）机制中的特殊请求。它用于在跨域请求涉及到一些非简单请求条件时进行预检，以确保服务器支持该请求。
预检请求包含以下特征：
使用 OPTIONS 方法发送请求。
在请求头中包含了 Origin 字段，指示请求的来源域。
在请求头中包含了 Access-Control-Request-Method 字段，指示实际请求所使用的方法。
在请求头中可能包含其他 CORS 相关的字段，如 Access-Control-Request-Headers，用于指示实际请求所使用的自定义请求头。
服务器收到预检请求后，会进行一系列的验证和处理，包括验证请求的来源是否允许、请求方法是否被支持、是否需要进行身份验证等。服务器需要返回相应的 CORS 相关的响应头，如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等，以告知浏览器是否允许实际请求的发送。
只有在服务器返回的预检响应满足跨域要求时，浏览器才会继续发送实际请求，否则将会阻止实际请求的发送，并抛出相应的错误。
通过预检请求，浏览器和服务器可以进行必要的协商和验证，以确保跨域请求的安全性和合法性。预检请求是 CORS 机制中的一部分，旨在提供更加安全和可控的跨域访问方式。
CORS 包括两种类型的请求：简单请求（Simple Request）和非简单请求（Non-simple Request）。

对于简单请求，浏览器会直接发送实际请求，并在请求头中包含 Origin 字段，表示请求的来源域。服务器可以通过设置响应头中的 Access-Control-Allow-Origin 字段来指定允许跨域访问的源，从而完成跨域请求。

而对于非简单请求，浏览器会先发送一个 OPTIONS 方法的预检请求（Preflight Request），在预检请求中包含了一些额外的 CORS 相关字段，如 Access-Control-Request-Method 和 Access-Control-Request-Headers。服务器收到预检请求后，进行验证和处理，并返回相应的 CORS 相关响应头，确认是否允许实际请求的发送

注意：在res.header（）…之后要加next（），图片的没有加

5.nginx反向代理