[vue] [axios] 设置代理实现跨域时的纠错

# 第一次做前端工程 #

记一个今天犯傻调查的问题

----------------------------------------------------------------------------------

Front-End: Vue-Project(vue + vue-router + vuex + axios)

    地址：http://localhost:3000/

    http://localhost:3000/AModule    ----地址1：OK

    http://localhost:3000/BModule    ----地址2：OK

    http://localhost:3000/AModule/childroute    ----地址3：NG

# 针对跨域，在 vue.config.js 文件里配置代理

devServer: {
  proxy: {
    host: 'localhost:3000'
    target{
      "api": {
        target: "http://localhost:4000",
        changeOrigin: true
      }
    }
  }
}

 

----------------------------------------------------------------------------------

Back-End

    https://localhost:4000/api/xxx

（后端用的ASP.NET Core WebAPI，在StartUp.cs里添加service时设的Cors）

 

前端访问：

axios.get('api/xxx')

----------------------------------------------------------------------------------

为什么地址1，地址2访问的时候，都能正常跨域，

地址3（子路由的时候）url就错了呢，

变成了    https://localhost:4000/AModule/api/xxx

应该是    https://localhost:4000/api/xxx

 

给 axios 设或不设 baseURL “  https://localhost:4000  ” 都无法访问

其实就是这里错的，axios 的 baseURL 应该为：

http://localhost:3000    ----即前端工程的地址，

低级错误啊尝试了老半天，就这么简单地解决了