关于vue的跨域问题配置

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import dns from 'dns'
import { defineConfig } from 'vite'      //重点部分
import vue from '@vitejs/plugin-vue'
dns.setDefaultResultOrder('verbatim')    //重点部分

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  
  server:{       //重点部分

    proxy:{
      "/api":{
        target:"http://xxxx",
        changeOrigin:true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  }
})

此处定义了"/api"的路径为http：//xxxx，

main.js配置

import { createApp } from 'vue'
import App from './App.vue'
import cors from 'cors'      //重点部分



const app =createApp(App)
app.use(cors)
app.mount('#app')

前端调用部分

<script setup>

import axios from "axios";

const postEvent = function(){
  axios.post('/api', {          //直接调用声明的/api ，不需要再重复写地址
    firstName: 'Yang',
    lastName: 'Ming'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}
</script>

多说几句。

跨域问题是vue-vite为了保护用户的信息安全设置的，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。vue-vite将拒绝此次GET或POST请求。说简单点，就是拒绝访问。