vue3 vite项目解决跨域

170 阅读1分钟

解决跨域一共两种方式: 1.修改vite.config.js文件 2.go gin模块添加访问中间件

第一种方式完整vite.config.js文件代码:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  server:{
    proxy:{
      '/api': {
        target: 'http://127.0.0.1:8080', // 目标服务器地址
        changeOrigin: true, // 是否允许跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },  
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },  
})

说明:

  • vue3中 rewrite: (path) => path.replace(/^\/api/, '') 路由重写代码必须添加,而且匹配规则不能出错。
  • 只要正确设置前端跨域配置,然后项目正式部署后在nginx中配置代理即可,不用配置go的跨域也可以正常访问项目。