目录

1 跨域的概念

2 解决办法

2.1 修改请求实例的公共前缀

 2.2 修改vite.config.js文件

---

1 跨域的概念

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

2 解决办法

原理：使得浏览器向两个端口发送请求和接手请求，变成了浏览器只和前端端口交互，后端与前端交互。

2.1 修改请求实例的公共前缀

假如你有个请求的实例如下：

//其它代码
const baseURL = 'http://localhost:8080';    //公共前缀
const instance = axios.create({baseURL});

现需要将其修改成如下：

//保证和前端的端口号相同为5173
//相当于http://localhost:5173/api
const baseURL = '/api';    
const instance = axios.create({baseURL});

 2.2 修改vite.config.js文件

初始化情况如下：

//其它代码
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

现在需要向其中添加内容使其变成：

export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server: {proxy: {//拦截所有包含/api的链接'/api': {//转换的目标链接将5173转为8080，由前端发送target: 'http://localhost:8080',  //是否换源，true则转化  changeOrigin: true,    //使得转换后的链接中的/api变成空字符串rewrite: (path) => path.replace(/^\/api/, '')}}}
})