Vue项目的网络请求代理到封装详细步骤

vue create demo

npm install axios

  devServer: {     host: "0.0.0.0", // 是否可以被覆盖     port: 8090, // 配置本地端口号     open: true,     //解决跨域问题     proxy: {       // 正式       "/api": {         target: "http://IP地址:端口号/",         changeOrigin: true,         secure: false, // 如果是https接口，需要配置这个参数         pathRewrite: {           "^/api": "",         },       },       },     },   },

//http封装请求 import axios from "axios"; axios.defaults.baseURL = "/api"; axios.defaults.headers = //公共携带请求头 //大部分是 "Content-Type:application/json;charset=UTF-8" axios.defaults.withCredentials = true;

import axios from "axios";//引入axios const request = axios.create({//进一步封装axios   baseURL: "/api",//配置跟路由   timeout: 5000,//配置请求超时时间 });  //添加请求拦截器 request.interceptors.request.use(function (config) {} //添加响应拦截器 request.interceptors.request.use((res) => {   return res; }),   (err) => {     return Promise.reject(err);   };  export default request; //暴露出去

import request from "@/utils/request"; // 引入request // 登录 export const UserLogin = (params) => {//封装login请求   return request({     url: "/login",//请求地址     method: "post",//请求方式     data: params,//请求体   }); };