Vue3+Vite解决跨域问题

Vue3项目

首先找到项目里面的vite.cofig.js找到代码中的server然后替换成下面的即可

server: { //主要是加上这段代码
      //host+port实际上就是项目的启动地址是多少
      host: '127.0.0.1',
      port: 8001,
      proxy: {
        '/api': {
          //这里的target实际上就是真实的后端地址，看看你的路径前缀如果有api的话在端口后面加上api
          target: 'http://127.0.0.1:7090/api',	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    }

附上vite.config.js的所有代码

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import { wrapperEnv } from './build/utils';
import { createProxy } from './build/vite/proxy';
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command}) => {
  const root = process.cwd();
  const env = loadEnv(mode, root);
  const viteEnv = wrapperEnv(env);
  const { VITE_PORT, VITE_PROXY } = viteEnv;
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: { //主要是加上这段代码
      host: '127.0.0.1',
      port: 8001,
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:7090/api',	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    }
  }
})

此时去使用APIfox访问地址就可以访问到了