Vue3前端服务解决跨域问题——配置代理

由于浏览器的同源策略限制，向不同源（不同协议，不同域名，不同端口）发送ajax请求会失败

注册为例:当浏览器启动的时候，会先发送请求到前端服务，得到一个注册的页面，注册页面的源http://localhost:5173,当点击注册时，会发送请求到后端服务，后端服务的http://localhost:8080，不同端口，是不同的源，由于同源策略限制，那么发送请求就会失败；这种问题就是跨域问题

解决：通过前端服务的配置代理来解决，当我们配置了代理之后，这个请求就不会从5173，直接发向8080；当我点击注册按钮发送异步请求，它会先把我们的请求发送到前端服务，再由前端服务转发到后端服务。

当我们点击注册发送异步请求时，这时的源是http://localhost:5173，这时我们通过配置代理的源也是http://localhost:5173，就不会发生跨域问题。注意跨域问题是发生在浏览器端的，只要浏览器才会有同源策略限制，我们通过前端服务向后端发送请求就不是在浏览器上了，是从服务端发起的

方法:

真正的配置代理：server（服务相关的配置 ）proxy（配置一些代理）/api（指请求中有没有这个路径，如果有就进行一些处理）比如说发送了一个异步请求给了前端服务，路径是http://localhost:5173/api/user/register,这个路径中有/api，那么前端服务就会修改源，把http://localhost:5173改为http://localhost:8080，路径就会变成http://localhost:8080/api/user/register，同时还有一个路径重写，把路径里的/api替换成' ',空的，替换为之后路径就为http://localhost:8080/user/register，这就是请求后台接口的路径，当路径重写完成后，前端服务就会把对应的请求转发到后端服务上