axios配置代理

诺冉

已于 2022-11-23 16:10:05 修改

阅读量2.2k

点赞数

文章标签： vue.js javascript 前端

于 2022-11-23 15:42:25 首次发布

本文链接：https://blog.csdn.net/m0_67182997/article/details/128001387

版权

1.安装axios

npm i -S axios

2.新建src/utils/request.js项目核心请求方法的模块方法

import axios from 'axios'

// 创建一个自定义的axios方法(比原来axios多个基地址)
// axios函数请求的url地址前面会被拼接基地址，然后axios请求baseURL+url后台完整地址
const request = axios.create({
   baseURL:"/api",
   timeout:3000
})

// 导出自定义的axios方法,供外面调用传参发请求
  export default request

3.新建src/api/index.js项目接口方法统一管理模块方法

import request from '@/utils/request'

export const loginAPI =(data)=>{
   // 这里先用这个接口测试下，如果url以http开头会忽略baseURL，axios直接请求此地址
    return request({
      method:"POST",
      url:"/login",
              // Content首字母C要大写
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, //请求头要加这个},
    data: qs.stringify(data)
    }
  })
}

4.在任意组件src/App.vue中，引入接口请求方法，并请求数据

import {loginAPI} from '@/api'
export default {
 created(){
 this.loginFn()
 },
 methods:{
    async loginFn(){
       const res = await loginAPI()
       console.log(res)
   }
  }
}

这种分层架构思想，可以更好的统一管理项目中所有的接口，也并方便统一给axios方法添加拦截器和修改基地址

5.产生跨域，配置代理

// vue.config.js
module.exports = {
  devServer:{
     proxy:{
       "/api":{
          // 代理目标地址
            target:"http://1.116.64.64:5004/api2",
          // 允许跨域
            changeOrigin:true,
          // 重写路径
            pathRewrite:{
              "^/api":""
             }
          }
      }
   }
}