跨域无法调用接口，解决方法（has been blocked by CORS policy）

前言：

        在进行个人项目开发的时候，前端调用后端接口的时候，提示has been blocked by CORS policy。后端未开启配置相关跨域服务，因此无法完成请求。想在不配置后端跨域的情况下，修改前端完成开发阶段的接口请求。

报错原因分析：

报错信息：has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

译：由于跨源资源共享（CORS）策略的限制，请求已被阻止：预检请求的响应未通过访问控制检查：所请求的资源上未出现“Access-Control-Allow-Origin”标头。

        开始我并不知道在同一个主机下，端口不同，不开启跨域是无法访问接口。后续查阅相关资料信息，是因为浏览器的同源策略（Same-Origin Policy） --- 浏览器在跨源（跨域）请求时会看响应头的CORS相关字段，如果后端没有返回允许的CORS头，浏览器会阻止前端脚本访问响应（请求会发出，但JS无法读取响应内容）。

        其中，在HTML标准（WHATWG）：定义了源（origin）的概念 ---

                                                                 origin = scheme（协议）+host（主机）+port（端口）

我使用前后端的源如下：

前端页面：http://localhost:5173
后端接口：http://localhost:8080

这里都是http协议，是同一台主机，但是端口不同 => 不同源 => 触发CORS检查。在后端服务器未配置相关检查时，导致无法访问接口。

解决方案：

本文描述的是：开发阶段，使用前端代理转发，在Vite配置中设置代理，将请求转发到后端服务器，避免跨域。

1、在创建请求实例的时候，baseURL直接置空字符串。

2、在vite.config.ts中设置代理。

可在'/api'加逗号继续写代理：

在不影响正常使用接口的情况下，可以写在一起：

原理：

        前端调用接口的时候，会经过如下几个步骤。例：

1、前端调用fetch('/api/user/login'/）时，浏览器向Vite开发服务器（监听 5173）发出请求：http://localhost:5173/api/user/login。

2、Vite服务接收到请求，按照proxy规则，将请求服务器端转发到：http://localhost:8080/user/login（这是在Vite服务器上发出的HTTP请求，发生在服务器端，不受浏览器同源策略影响）。

3、后端（8080）处理请求并返回响应给Vite（服务器间的通信）。

4、Vite把后端的响应体和响应头转发回原始的浏览器请求连接上。浏览器从5173的连接接收到该响应，并交给前端JS。

验证：

        发送一次请求，在检查中查看对应请求的请求头，会看到：

如果是直接访问的localhost:8080获取数据，在请求头中会是"Host      localhost:8080"。