相信不少同学在开发过程中，都遇到过跨域问题，我也百度过很多文章，解决的办法层出不穷，有配置后端Nginx、后端文件添加请求头等等。
本文将会教会大家利用配置proxy代理，解决跨域问题。
在webpack 或 vite 里修改配置文件，就是那个带有config的文件。
这里使用的vite, 所以是修改的 vite.config.js , webpack 是 webpack.config.js
打开后是这样的：
```import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
}
})```
我们在下面添加配置：
```
server:{
proxy: {
'/test': { #检测到 /test 开头的url就会拦截
target: 'http://123.57.249.44', #将这段拼接到拦截的url上
changeOrigin: true, #是否改变请求源和目标源保持一致
//rewrite: (path) => path.replace(/^\/test/, '') #把test去掉
}
}```
配置好后就可以在本地访问api接口了，我们可以测试一下。
在服务器上编写一个测试用PHP文件，
辉常简单的一段代码：
<?php
echo: 'hhhhhhhhh';
?>
访问这个接口会返回hhhhhhh，此外没有任何东西，Nginx也没有添加任何修改。
此时用axios访问可以返回结果，没有跨域问题：
