ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue.config.js配置跨域 axios.create实例封装 出现跨域题目 [打印本页]
作者: 北冰洋以北    时间: 2024-6-8 16:48
标题: vue.config.js配置跨域 axios.create实例封装 出现跨域题目
vue.config.js文件一样
  1. const { defineConfig } = require( '@vue/cli-service' )
  2. const path = require( 'path' )
  4. module.exports = defineConfig( {
  5.   transpileDependencies: true,
  6.   productionSourceMap: false,
  7.   publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  8.   outputDir: 'dist',
  9.   assetsDir: 'static',
  10.   devServer: {
  11.     port: 8090, // 修改开发服务器运行的端口号
  12.     open: true,
  13.     host: "localhost",
  14.     proxy: {
  15.       '/appApi': {
  16.         target: 'https://****************/appApi', // 反向代理 线上
  17.         // target: 'http://192.168.3.17:8092', // 本地
  18.         ws: true,
  19.         changeOrigin: true,
  20.         pathRewrite: {
  21.           '^/appApi': ''
  22.         }
  23.       }
  24.     },
  25.   },
  26.   pluginOptions: {
  27.     "style-resources-loader": {
  28.       preProcessor: "less",
  29.       patterns: [path.resolve( __dirname, "./src/assets/style/commons.less" )] // 全局引入less
  30.     }
  31.   },
  32.   chainWebpack: ( config ) => {
  33.     config.plugin( 'define' ).tap( ( definitions ) => {
  34.       Object.assign( definitions[0], {
  35.         __VUE_OPTIONS_API__: 'true',
  36.         __VUE_PROD_DEVTOOLS__: 'false',
  37.         __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
  38.       } )
  39.       return definitions
  40.     } )
  41.   }
  42. } )
复制代码
两种情况，第一种是使用了axios.create实例封装后的哀求，第二种是 直接使用axios进行哀求
  1. require.js文件
  2. import axios from "axios";
  3. import router from "../router";
  4. import { ElMessage } from 'element-plus';
  5. import { info } from '@/store/index';
  6. // 实例
  7. const useInfo = info()
  8. /** 默认配置*/
  9. const instance = axios.create( {
  10.   baseURL: window._CONFIG["domianURL"],
  11.   timeout: "10000",
  12.   headers: {
  13.     "Content-Type": "application/json;charset=UTF-8",
  14.     "Access-Control-Allow-Origin": "*",
  15.   },
  16. } );
  18. /** 请求拦截 */
  19. instance.interceptors.request.use( ( config ) => {
  20.   // 登录验证
  21.   if ( useInfo.token ) {
  22.     config.headers.Authorization = `Bearer ${ useInfo.token }`;
  23.   }
  24.   return config;
  25. } );
  27. /** 响应拦截 */
  28. instance.interceptors.response.use( ( response ) => {
  29.   if ( response && response.data.status == 200 ) {
  30.     return response.data;
  31.   } else {
  32.     if ( response.status == 501 ) {
  33.       router.push( "/login" );
  34.       ElMessage.error( '信息丢失，请重新登录' );
  35.     } else {
  36.       ElMessage.error( response.data.msg );
  37.       console.log( response.data, 'data' )
  38.       return Promise.reject( response.data );
  39.     }
  40.   }
  41. }, ( error ) => {
  42.   if ( error.message == 'timeout of ' + error.config.timeout + 'ms exceeded' ) {
  43.     ElMessage.error( '请求时间超过' + ( error.config.timeout / 1000 ) + '秒，请保证网络通畅' );
  44.   } else {
  45.     ElMessage.error( error );
  46.   }
  47. } );
  49. /**封装常用请求类型 */
  50. export const post = ( url, data ) => instance.post( url, data );
  51. export const get = ( url, params ) => instance.get( url, { params } );
  53. export default instance
复制代码
  1. // login.js文件
  2. import { post } from "@/utils/request";
  4. // 登录
  5. export const userLogin = ( data ) => post( '/appApi/app/userLogin/userLogin', data );
复制代码
 
  1. import { ref } from "vue";
  2. import { ElMessage } from 'element-plus'
  3. import { User, Lock } from '@element-plus/icons-vue'
  4. import { info } from '@/store/index'
  5. import { useRouter } from "vue-router";
  6. /**变量 */
  7. const ruleForm = ref( {
  8.   mobile: "",
  9.   password: "",
  10.   flag: 2 // 1小程序 2后台
  11. } );
  12. const rules = {
  13.   mobile: [
  14.     {
  15.       required: true,
  16.       message: "请输入用户名",
  17.       trigger: "blur",
  18.     },
  19.   ],
  20.   password: [
  21.     {
  22.       required: true,
  23.       message: "请输入密码",
  24.       trigger: "blur",
  25.     },
  26.   ],
  27. };
  28. /**实例 */
  29. const useInfo = info()
  30. const router = useRouter()
  34. // 这种不行 一直显示跨域 似乎没有被代理到，这种是经过axios.create封装后的
  35. import { userLogin } from "@/api/login.js"
  36. userLogin( '/appApi/app/userLogin/userLogin', ruleForm.value )
  38. // 这种可以跨域，这种直接使用axios
  39. import axios from 'axios'
  40. axios.post( '/appApi/app/userLogin/userLogin', ruleForm.value )
复制代码
------------------------------------------------第一种 不停表现跨域--------------------------------------------------
  1. // 这种不行 一直显示跨域 似乎没有被代理到，这种是经过axios.create封装后的
  2. import { userLogin } from "@/api/login.js"
  3. userLogin( '/appApi/app/userLogin/userLogin', ruleForm.value )
复制代码
------------------------------------------------第二种 可以正常哀求--------------------------------------------------
  1. // 这种可以跨域，这种直接使用axios
  2. import axios from 'axios'
  3. axios.post( '/appApi/app/userLogin/userLogin', ruleForm.value )
复制代码
有前辈遇到过这种题目吗？axios.create怎么跨域，是我配置的题目吗？请大佬 指导一下
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4