vue.config.js中配置跨域

最新推荐文章于 2024-08-21 08:39:22 发布

---果子---

最新推荐文章于 2024-08-21 08:39:22 发布

阅读量614

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_41424721/article/details/121105671

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个基于Axios的HTTP请求封装方法，并展示了如何在Vue项目中使用该封装来调用API接口。通过配置请求和响应拦截器，增强了错误处理能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、axios简单封装（utils下的request.js文件）

import axios from "axios";

const service = axios.create({
  baseURL: "https:xxx.com",
  timeout: 1000,
});

// 添加请求拦截器
service.interceptors.request.use(
  function (config) {
    console.log(config, "hahhah请求拦截");
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    return Promise.reject(error);
  }
);

export default service;

2、接口编写

import request from "@/utils/request";

export function getForbiddenList(params) {
  return request({
    url: "/v1/api/mgr/game/function/forbidden/list",
    method: "post",
    urlType: "v1",
    data: params,
  });
}

3、vue.config.js文件

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicPath: "/",
  outputDir: "dist",

  devServer: {
    proxy: {
      "https:xxx.com": {
        target: "https:xxx.com",
        changeOrigin: true,
      },
    },
  },

  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },
};