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

1.创建vue项目

vue create demo

demo是项目名称

2.安装axios

进入demo里面打开终端(黑窗口)，执行

npm install axios

3.进行config.js配置

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

4.main.js里引入

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

5.src目录下新建Utils文件夹,在内封装request.js

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;
//暴露出去

6.以login路由为示例 src文件下新建api文件，在api内新建login.js

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

7.在页面内引入方法，并使用

简单明了

来源：https://www.cnblogs.com/shengjiangMock/p/17358837.html