Vue项目中proxy 跨域配置, 针对有axios的baseURL

最新推荐文章于 2024-08-19 17:40:00 发布

追梦者的年轻人

最新推荐文章于 2024-08-19 17:40:00 发布

阅读量3.1k

点赞数 1

分类专栏：前端文章标签： vue proxy vue跨域

本文链接：https://blog.csdn.net/qq_42491370/article/details/104121208

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了在Vue项目中如何配置代理服务器以及使用axios进行API调用的方法。包括在config文件下设置proxyTable，dev.env.js中配置base_api，main.js中全局设置axios，并展示了请求具体接口的示例。

摘要由CSDN通过智能技术生成

1.首先主要的config文件下的index.js中的proxytable配置

  proxyTable: {
      '/proxy': {

        target:'http://localhost:8080/v1', 
    
        changeOrigin:true,
    
        pathRewrite: {
          '^/proxy': ''
        }
      }
    },

2.config下的dev.env.js中配置base_api,即与上文对应的proxy,会帮你自动自动去掉proxy

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"/proxy"'
})

3.axios中的全局设置配置

在main.js中加入

axios.defaults.baseURL = process.env.BASE_API;

4.首先你要安装axios和vue-axios

下面是我的main.js配置

import axios from 'axios'
import VueAxios from 'vue-axios';
Vue.use(axios,VueAxios)
axios.defaults.baseURL = process.env.BASE_API;

5.请求的时候,例如我现在需要请求 http://localhost:8080/v1/repair_order/这个接口,这样写就行了

 mounted() {
    axios
      .get("/repair_order")
      .then(r =>{
          console.log(r.data)
          this.tableData = r.data
      })
      .catch(function(error) {
        console.log(error);
      });
  },