关于使用proxy解决跨域可能会遇到的坑

问题

今天在给新项目配置proxy代理解决跨域的时候遇到了一个奇怪的问题，是这样的 我先给axios设置了baserurl是一个绝对地址https://www.xxx.com,
因为这个网站的接口没有设置跨域，所以我在项目的配置文件中用了proxy，做了代理，但是我怎么设置都不对，我真的是一个大无语，我和官网的设置比对了一遍又一遍，还是不对，然后，我就突然在网上看到axios不要设置绝对路径，然后我就开悟了，原因写在下面了.

axios的配置文件

// 这里我简单模拟一下
import axios from 'axios'
const instance = axios.create({
	baseURL:'https://www.xxx.com'，
	...
})

项目的配置文件

// 我的项目使用的是vite 所以这是vite.config.js文件中
export default defineConfig({
...
	server: {
		proxy: {
			'/api' {
		        target: 'https://www.qqq.com',
		        changeOrigin: true,
		        rewrite: (path) => path.replace('/api', '')
		      }
		}
	}
})

原因

我在网上查资料的时候，看到axios不能用绝对路，然后，我翻将笔记上的灰尘拍了拍，接下来进入正题，

首先无论是使用webpack的proxy还是vite的proxy，他们的核心原理都是利用node代理服务器来解决跨域的，所以我们就需要往代理服务器上发请求，然后代理服务器去请求目标服务器，然后将结果返回给我们，所以如果axios的basurl写出目标服务器，那么关代理服务器什么事，压根没请求代理服务器啊，哦～原来如此 我真的栓q，这事我给忘了。

正确做法，将axios的baseURL设置为空，或者设置成请求代理服务器，也就是本地启动的服务器，一般为空就行axios会自动用本地的前缀拼接
axios的配置文件

// 这里我简单模拟一下
import axios from 'axios'
const instance = axios.create({
	baseURL:''，
	...
})

如果你不懂上面说的，那么你应该对跨域的解决方案了解不多，可以去了解一下，或者看我的另外一篇文章node代理服务器解决跨域