解决跨域,vue.config.js中配置devServer

在vue.config.js文件中

const port = 7000
module.exports = defineConfig({
  transpileDependencies: true,

  outputDir: 'dist',
  assetsDir: 'static',

  devServer: {
    hot: true,
    port: port,
    proxy: {
      //设置devServe解决跨域问题
      "/api/home":{
        // 我们需要告诉devserver帮我们解决那个地址的跨域
        target:"http://localhost:5100",
        /*也可以写成http://192.168.0.1:5100   上面是服务在本地跑的时候 */
        //控制服务器收到的请求头中的Host的值，如果不加(changeOrigin:flase) host的只为6040，如果加了(changeOrigin;true)以后值为5040
        changeOrigin:true,
        // 重写路径
        pathRewrite:{
            "^/api":""
        }
      },
    }
  },
  publicPath: "/",
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    }
  },
})

在调用axios的时候,就可以将axios中的地址"http://localhost:5100/**" 写为"/api/home/****"