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,//請求體
  });
};