解决vue3+vite跨域失败问题_vite 跨域

vue3+vite用proxy跨域出现的问题

一、改错前的代码

vite.config.js中的代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: "http://gmall-h5-api.atguigu.cn", //跨域地址
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, '')   //重写路径

      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

发送请求的文件中的跨域请求代码

import axios from 'axios'
axios.get('/api/product/getBaseCategoryList').then((res) => {
    console.log('success:' + res.data);
}).catch((err) => {
    console.log('failed:' + err.data);
});
1
2
3
4
5
6

出现这些错误是因为 rewrite，写这行代码时要看接口有没有带上/api，如果接口本身就有/api则不需要重写路径，将重写路径的这行代码删掉就好了

二、改正后vite.config.js代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: "http://gmall-h5-api.atguigu.cn", //跨域地址
        changeOrigin: true, //支持跨域
        

      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

之后就跨域正常跨域了

三、如果想要保留rewrite这行代码，就需要添加拦截器，配置baseURL:“/api”

发送请求的文件中的跨域请求代码如下

import axios from 'axios'
const requests = axios.create({
    baseURL:"/api",
    timeout:5000
});

//请求拦截器，在发送请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use(config=>{
    return config;
});

//相应拦截器
requests.interceptors.response.use((res)=>{
    return res.data;
},(error)=>{
    alert(error.message);
    return new Promise();
})

requests.get('/api/product/getBaseCategoryList').then((res) => {
    console.log('success:' + res.data);
}).catch((err) => {
    console.log('failed:' + err.data);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这样写也可以跨域成功