vue中的axios和proxy代理

最新推荐文章于 2023-12-29 10:20:35 发布

希江木

最新推荐文章于 2023-12-29 10:20:35 发布

阅读量1.6k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/baidu_38730364/article/details/129673958

版权

复习专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue项目中如何引入axios库，通过配置proxy代理解决跨域问题。详细阐述了axios的使用，包括二次封装，添加请求和响应拦截器，以及封装接口调用的过程。同时，解析了proxy代理的工作原理，说明了'/api'前缀在代理中的作用和pathRewrite如何重写路径，确保请求正确地发送到实际接口。

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

引入axios

npm install axios

配置proxy代理，解决跨域问题

proxyTable: {
      "/api": {
        target: "http://192.168.X.XXX:XXXX", //需要跨域的目标
        pathRewrite: { "^/api": "" }, //将带有api的路径重写为‘’
        ws: true, //用与支持webCocket
        changeOrigin: true //用于控制请求头的Host
      },
    "/two": {
        target: "http://XXX.XXX.X.XXX:XXXX", 
        pathRewrite: { "^/two": "" }, 
        ws: true, 
        changeOrigin: true 
      }
    },

引入axios，二次封装，添加请求、响应拦截器

import axios from "axios";

const requests = axios.create({//创建
  baseURL: "/api", //在调用路径中追加前缀‘/api’
  timeout: 50000 //单位ms，超过该时间即为失败
});

//添加请求拦截器
requests.interceptors.request.use(
  function(config) {
    config.headers.token ="token";//在发送请求之前的行为，加入token
    return config;
  },
  function(error) {
    //处理错误请求
    return Promise.reject(error);
  }
);

//添加响应拦截器
requests.interceptors.response.use(
  function(response) {
    //成功接收到响应后的行为，例如判断状态码
    return response;
  },
  function(error) {
    //处理错误响应
    return error;
  }
);

export default requests;

封装接口调用

import request from "./request";

export function getData(){
    return request({
        url:'/getUser',//
        method:'get'
    })
}

vue中调用接口

<template>
  <div>
    <p><router-link to="/">回到首页</router-link></p>
    <h1>axios测试</h1>
  </div>
</template>

<script>
import {getData} from "@/api/index.js"
export default {
  data() {
    return {}
  },
  mounted(){
    console.log("开始了")
    this.fetchData()
  },
  methods:{
    async fetchData(){
        let result = await getData()
        console.log(result)
    }
  }
}
</script>
<style scoped>
</style>

控制台成功调用：