在vite.config.js文件中配置代理解决跨域

vite.config.js:

登录后复制

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
import VueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3003,
    proxy: {
      '/api': {
        target: 'http://localhost:85',
        changeOrigin: true,
        rewrite: (path) => {
          console.log(path)
          return path.replace(/^\/api/, '/api')
        },
        // HTTP头部转发
        onProxyRes: (proxyRes, req, res) => {
          // 可以在这里修改响应头
        }
      }
    }
  },
  plugins: [
    vue(),
    //VueDevTools(),
    visualizer()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.

Index.vue:

登录后复制

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'

onMounted(() => {
	axios({
		url: 'http://localhost:3003/api/light/user/logout',
		method: 'post'
	})
})
</script>

<template>
	<div></div>
</template>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.

原创作者: xutongbao 转载于: https://blog.51cto.com/xutongbao/11315109