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


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(接口封装)


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.申请后果如下:


9.本地的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。