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

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);
      });
  },

 

你可能感兴趣的:(前端)