由于浏览器的同源策略限制,向不同源(不同协议,不同域名,不同端口)发送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,这就是请求后台接口的路径,当路径重写完成后,前端服务就会把对应的请求转发到后端服务上