vue.config.js配置跨域 axios.create实例封装 出现跨域问题_feature flag __vue_prod_hydration_mismatch_details

vue.config.js文件一样

const { defineConfig } = require( '@vue/cli-service' )
const path = require( 'path' )
 
module.exports = defineConfig( {
  transpileDependencies: true,
  productionSourceMap: false,
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  devServer: {
    port: 8090, // 修改开发服务器运行的端口号
    open: true,
    host: "localhost",
    proxy: {
      '/appApi': {
        target: 'https://****************/appApi', // 反向代理 线上
        // target: 'http://192.168.3.17:8092', // 本地
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/appApi': ''
        }
      }
    },
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve( __dirname, "./src/assets/style/commons.less" )] // 全局引入less
    }
  },
  chainWebpack: ( config ) => {
    config.plugin( 'define' ).tap( ( definitions ) => {
      Object.assign( definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      } )
      return definitions
    } )
  }
} )

两种情况，第一种是使用了axios.create实例封装后的请求，第二种是 直接使用axios进行请求

require.js文件
import axios from "axios";
import router from "../router";
import { ElMessage } from 'element-plus';
import { info } from '@/store/index';
// 实例
const useInfo = info()
/** 默认配置*/
const instance = axios.create( {
  baseURL: window._CONFIG["domianURL"],
  timeout: "10000",
  headers: {
    "Content-Type": "application/json;charset=UTF-8",
    "Access-Control-Allow-Origin": "*",
  },
} );
 
/** 请求拦截 */
instance.interceptors.request.use( ( config ) => {
  // 登录验证
  if ( useInfo.token ) {
    config.headers.Authorization = `Bearer ${ useInfo.token }`;
  }
  return config;
} );
 
/** 响应拦截 */
instance.interceptors.response.use( ( response ) => {
  if ( response && response.data.status == 200 ) {
    return response.data;
  } else {
    if ( response.status == 501 ) {
      router.push( "/login" );
      ElMessage.error( '信息丢失，请重新登录' );
    } else {
      ElMessage.error( response.data.msg );
      console.log( response.data, 'data' )
      return Promise.reject( response.data );
    }
  }
}, ( error ) => {
  if ( error.message == 'timeout of ' + error.config.timeout + 'ms exceeded' ) {
    ElMessage.error( '请求时间超过' + ( error.config.timeout / 1000 ) + '秒，请保证网络通畅' );
  } else {
    ElMessage.error( error );
  }
} );
 
/**封装常用请求类型 */
export const post = ( url, data ) => instance.post( url, data );
export const get = ( url, params ) => instance.get( url, { params } );
 
export default instance

// login.js文件
import { post } from "@/utils/request";
 
// 登录
export const userLogin = ( data ) => post( '/appApi/app/userLogin/userLogin', data );

import { ref } from "vue";
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { info } from '@/store/index'
import { useRouter } from "vue-router";
/**变量 */
const ruleForm = ref( {
  mobile: "",
  password: "",
  flag: 2 // 1小程序 2后台
} );
const rules = {
  mobile: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
};
/**实例 */
const useInfo = info()
const router = useRouter()
 
 
 
// 这种不行 一直显示跨域 似乎没有被代理到，这种是经过axios.create封装后的
import { userLogin } from "@/api/login.js"
userLogin( '/appApi/app/userLogin/userLogin', ruleForm.value )
 
// 这种可以跨域，这种直接使用axios
import axios from 'axios'
axios.post( '/appApi/app/userLogin/userLogin', ruleForm.value )

------------------------------------------------第一种 一直显示跨域--------------------------------------------------

// 这种不行 一直显示跨域 似乎没有被代理到，这种是经过axios.create封装后的
import { userLogin } from "@/api/login.js"
userLogin( '/appApi/app/userLogin/userLogin', ruleForm.value )

------------------------------------------------第二种 可以正常请求--------------------------------------------------

// 这种可以跨域，这种直接使用axios
import axios from 'axios'
axios.post( '/appApi/app/userLogin/userLogin', ruleForm.value )

有前辈遇到过这种问题吗？axios.create怎么跨域，是我配置的问题吗？请大佬 指导一下