解决Vue中Axios发送请求时跨域的问题。

0 写在前面

在程序开发时，前后端运行在不同的地方。假设自己的电脑启动前后端，那么他们的端口号不可以冲突。
当在Vue发起请求，那么就存在跨域的问题，会被浏览器CORS阻止：原因是没有解决跨域的问题。

1 解决

vue使用axios

module.exports = defineConfig({
  // 跨域问题
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:7430/api/',// 后端接口--->其中7430是自己后端的端口号
        changeOrigin: true, // 是否跨域
      }
    }
  }

})

main.js中

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$axios = axios

new Vue({
	……
  render: h => h(App)
}).$mount('#app')

然后重启项目就可以了
示例：


成功。