axios模块化封装(实例化)和vue本地解决跨域

李绮
• 阅读 1392

1.开发环境 vue+axios+typescript+eslint+prettier
2.电脑系统 windows10专业版
3.在使用vue开发的过程中,我们在数据交互的过程中,一般会选择使用axios,很多小伙伴都在使用,下面我来分享一下axios封装和vue开发解决跨域。
4.安装axios

npm i axios -S

4-1.后端接口如下:

主机一:http://192.168.0.103:8020
   接口: /api/login
主机二: http://192.168.0.103:3000
   接口: /chen

5.在根目录下,新建文件,目录结构如下:

----src
----.env.development
----.env.production
----.env.test

axios模块化封装(实例化)和vue本地解决跨域
5-1 .env.development代码如下:

NODE_ENV = 'development'
//指定当前环境模式
VUE_APP_CURRENTMODE = 'development'
VUE_APP_BASE_URL = "http://192.168.0.103:8020"


VUE_APP_BASE_PL="http://192.168.0.103:3000"
VUE_APP_BASE_PLAPI="/chen"

VUE_APP_BASE_API="/api"

6.在src录下,新建network文件夹,目录结构如下:

----src
-----network
------Instances(实例集合)
-------index.ts(引入实例)
-------Instance1.ts(实例1)
-------Instance2.ts(实例2)
------api.js(接口封装)

axios模块化封装(实例化)和vue本地解决跨域
6-1.Instances下Instance1.ts代码如下:

import axios from "axios";
export const Instance1 = (config: Object) => {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_PLAPI,
    timeout: 900000,
  });

  instance.interceptors.request.use(
    (config) => {
      if (config.method === "get") {
        config.url = config.url + "?" + config.data;
      }
      if (sessionStorage.getItem("Authorization")) {
        config.headers.Authorization =
          "auth " + sessionStorage.getItem("Authorization");
      }
      // //console.log("请求拦截成功啦");
      // //console.log(config);
      return config;
    },
    (err) => {
      console.log("请求失败啦");
      console.log(err);
    }
  );

  //
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (err) => {
      console.log("响应失败");
      console.log(err);
      // return err;
    }
  );
  return instance(config);
};

6-2.Instances下Instance2.ts代码如下:

import axios from "axios";
import qs from "qs";
export const Instance2 = (config: Object) => {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 900000,
  });

  instance.interceptors.request.use(
    (config) => {
      if (config.method === "get") {
        config.url = config.url + "?" + qs.stringify(config.data);
      }

      if (sessionStorage.getItem("Authorization")) {
        config.headers.Authorization =
          "auth " + sessionStorage.getItem("Authorization");
      }
      // //console.log("请求拦截成功啦");
      // //console.log(config);
      return config;
    },
    (err) => {
      console.log("请求失败啦");
      console.log(err);
    }
  );

  //
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (err) => {
      console.log("响应失败");
      console.log(err);
      // return err;
    }
  );
  return instance(config);
};

6-3.Instances下index.ts代码如下:

import { Instance1 } from "@/network/Instances/Instance1";
import { Instance2 } from "@/network/Instances/Instance2";

export { Instance1, Instance2 };

6-4.networt中api.ts代码如下:

import { Instance1, Instance2 } from "@/network/Instances";
export const Chen = (value: any) => {
  return Instance1({
    url: "/chen",
    method: "post",
    // data: value, //传参方式一:缺点(如果这个接口在很多地方进行了调用,修改参数了,我们需要修改很多的地方)
    data: { password, account, code } //传参方式二:推荐传参方法,可以更好的维护
  });
};

export const Login2 = (value: any) => {
  return Instance2({
    url: "/login",
    method: "post",
    data: value,
  });
};

7.在根目录下新建vue.config.js(和package.json同级),代码如下:

module.exports = {
  // 打包的时候去掉.map文件
  productionSourceMap: false,
  devServer: {
    proxy: {
      "/api": {
        target: process.env.VUE_APP_BASE_URL,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_API
        },
      },
      "/chen": {
        target: process.env.VUE_APP_BASE_PL,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/chen": process.env.VUE_APP_BASE_PL
        },
      },
    }
  },
  chainWebpack: (config) => {
    // 开启eslint自动修复,关键代码
    config.module
      .rule("eslint")
      .use("eslint-loader")
      .loader("eslint-loader")
      .tap((options) => {
        options.fix = true;
        return options;
      });
  },
};

8.请求结果如下:
axios模块化封装(实例化)和vue本地解决跨域
axios模块化封装(实例化)和vue本地解决跨域
9.本地的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

点赞
收藏
评论区
推荐文章
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于Vue3TypeScriptVueCli4.0vantuisassrem适配方案axios封装jssdk配置vconsole移动端调试,构建手机端模板脚手架项目地址:建议手机端查看Node版本要求VueCLI需要Node.js8.9或更高版本
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Easter79 Easter79
3年前
vue 使用axios 出现跨域请求的两种解决方法
最近在使用vueaxios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案。1:服务器端设置跨域header(“AccessControlAllowOrigin:\”);header(“AccessControlAllowHeaders:contenttype”);header(“AccessCont
Easter79 Easter79
3年前
Vue axios调用第三方接口跨域解决
1.在config目录下index.js文件中设置proxyTable:proxyTable:{'/v1':{target:'https://api.douban.com',changeOrigin:true,pathRewrit
good123 good123
3年前
前端的路由封装
在一个项目当中,我们常常需要调用很多接口,我们不可能每次调用接口都完整地写一遍调用,因此我们需要对其进行封装/axios.js///封装axiosimportaxiosfrom"axios";importqsfrom"qs";//初始化axios,设置默认的baseURLconsthttpaxios.create(baseUR
Easter79 Easter79
3年前
springboot+vue 登录页面(一)
首先了解的技术点是:后台:springboot,mybatis,mybatis逆向工程,mysql,日志前端:nodejs,npm,cnpm,vue,vuecli,webpack,elementui,router,axios开发工具:idea,webstorm该项目前端使用的是vue,目的是实现前后端分离后台:1.选择spr
Chase620 Chase620
4年前
记录Vue项目实现axios请求头带上token
在vue项目中首先npm命令安装axios:npminstallaxiosSaxios的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化vuexpersistedstate插件保存数据npmiSvuexpersistedstateimportpersistedStat
Easter79 Easter79
3年前
TP5+layui表格使用(更新中)
<tableclass"layuihide"id"category"</table<scripttype"text/javascript"src"__PLUGINS__/axios/axios.min.js"</script<scripttype"text/javascr
liam liam
1年前
解决 Axios 跨域阻碍,提高前端接口访问效率
跨域是指访问另外一个域的资源,由于浏览器的同源策略,默认情况下使用XMLHttpRequest和Fetch请求时是不允许跨域的。跨域的根本原因是浏览器的同源策略,这是由浏览器对施加的安全限制。Axios跨域常见报错跨域请求被阻止(CrossOriginRe
liam liam
1年前
优化你的 JavaScript 项目:Axios request 封装指南
在开发中,为了提高效率,通常对进行封装,简化了请求的发送和对响应的处理。同时,统一错误处理机制有助于维护代码的清晰和一致性。本文介绍了一些高效封装Axios请求的方法。封装理念通过创建一个请求函数,我们可以隐藏Axios的直接调用,将请求的配置作为参数传入
李绮
李绮
Lv1
思归若汾水,无日不悠悠。
文章
3
粉丝
0
获赞
0