vue使用axios和配置代理

weixin_44387746

于 2021-07-26 17:58:46 发布

阅读量996

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44387746/article/details/119114983

版权

本文介绍了在Vue项目中如何安装和使用axios，以及如何配置反向代理，重点在于main.js的axios应用和vue.config.js中的代理设置。

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

1.首先安装 axios 和 vue-axios

npm install axios
npm install vue-axios

2.在入口文件 main.js中应用 axios

import axios from 'axios'
import vueAxios from 'vue-axios'
createApp(App).use(axios,vueAxios)

3.配置反向代理,在vue.config.js文件中添加

module.exports = {
  devServer: {
    hot: true,//热更新
    open: true,//自动打开浏览器
    port: 8080,
    host: "",
    proxy: {
      "/api": {
        target: "https://locally.uieee.com", //要跨域的域名 目标地址
        changeOrigin: true, //是否开启跨域  是否更改源路径
        ws: true,
        pathRewrite: {
          "^/api": "" // /api/ / 凡是/api开头的地址都可以跨域
        }
      }
    }
  }
}

最后调用

  getData(){
    this.axios.get('/api/slides').then((res)=>{
      console.log(res)
    })
  }