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企服之家，中国第一个企服评测及商务社交产业平台。