如下图所示
前端如下图所示
请添加图片描述

请添加图片描述

后端如下图所示

请添加图片描述
请添加图片描述
看请求发现发送了两次
请添加图片描述
请添加图片描述
综上所述可能时配置代理时候出问题了。

vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8888,
    //设置是否启动时打开浏览器
    open: true,
    //设置代理
    proxy: {
      //代理的根路径
      "/": {
        //是都开启ws
        ws: false,
        //代理的后端的路径
        target: "http://localhost:8000/", //这里填入你要请求的接口的前缀
        //是否开启路径转换
        changeOrigin: true, //虚拟的站点需要更管origin
        //代理路径更改
        pathRewrite: {
          "^/": "/", //重写路径
        },
      },
    },
  },
});

如果配置了代理类那么就不能在axios中配置baseurl了。
自己封装的axios类
httpCline.js

import axios from "axios";
import { ElMessage } from "element-plus";




问题就在这行没有注解掉

//**axios.defaults.baseURL = "http://localhost:8000";** 




 
axios.defaults.timeout = 10000;

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
axios.interceptors.request.use(
  (config) => {
    // eslint-disable-next-line no-debugger
    debugger;
    console.log("请求" + config);
    // config.headers["Content-Type"] = "application/json;charset=utf-8";
    // eslint-disable-next-line no-debugger
    let token = sessionStorage.getItem("token");
    if (token) {
      //给请求头加token
      config.headers["Authorization"] = token;
      config.headers.Authorization = token;
    }
    // 设置请求头
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// response 拦截器
// 可以在接口响应后统一处理结果
axios.interceptors.response.use(
  (response) => {
    if (response.data.flag === true) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  (error) => {
    // eslint-disable-next-line no-debugger
    console.log("异常", error.response);
    if (error.response.status === 400) {
      ElMessage.error(error.response.data.message);
    } else if (error.response.status === 401) {
      ElMessage.error("您未登录,请登陆后操作");
    } else if (error.response.status === 403) {
      ElMessage.error(error.response.data.message);
    } else if (error.response.status === 404) {
      ElMessage.error("后端端口未找到!");
    } else if (error.response.status === 500) {
      ElMessage.error("后端端口异常!--》" + error.response.data.message);
    } else {
      ElMessage.error("未知错误");
    }
    const errorMsg = JSON.stringify(error);
    console.log("请求异常:" + errorMsg);
  }
);

export default {
  post(uri, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: "post",
        url: uri,
        data: data,
      })
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  get(uri) {
    return new Promise((resolve, reject) => {
      axios({
        method: "get",
        url: uri,
      })
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  getTwo(uri, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: "get",
        url: uri,
        params: data,
      })
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
};

GitHub 加速计划 / vu / vue
109
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐