美文网首页js css html收藏
106.配置了devServer不生效问题

106.配置了devServer不生效问题

作者: wo不是黄蓉 | 来源:发表于2022-05-11 15:11 被阅读0次

    proxy配置看我之前的文章。
    今天才理解了一个axios配置的东西。之前一直在纠结为什么本地开启了devServer但是请求时的url却不是devServer配置的地址。


    答案在这里:
    在项目里面封装请求的地方,通常为request.js
    会有对axios requestresponse的封装,在设置axios请求的url的时候,会动态进行设置,通常会根据不同的环境,例如:开发、测试、生产来进行区分。

    axios.defaults.baseURL = util.getBaseUrl()
    

    getBaseUrl就是一系列用来区分环境的地址,但是这些我们就需要写系列的判断。
    可以看到每次baseURL获取到的都是开发环境服务端地址,这样本地代理没有匹配到就不会走本地配置的devServer的配置。
    同时这种情况不用我们手动setCookie信息(如果你已经登录过开发环境的话)。
    主要配置:

      axios.defaults.withCredentials = true
    

    为什么不需要手动setCookie参考

    getBaseUrl() {
        return window.location.href.indexOf("开发环境访问地址") === 0 
          ? "开发环境服务端地址"
          : window.location.href.indexOf("测试环境访问地址") === 0 
            ? "测试环境服务端地址"
            : window.location.href.indexOf("生产环境访问地址") === 0
              ? "生产环境服务端地址"
              : "开发环境服务端地址";
      }
    

    如果我们把默认配置改成"/",就会匹配到devServer路由,然后启动devServer进行访问,这种请求下需要手动setCookie才可以。

    更好的写法:

    //env.config.js
    const baseUrlMap = {
      dev:"开发环境服务端地址",
      test:"测试环境服务端地址",
      prod:"生产环境服务端地址",
    };
    
    const env = "dev"
    export default{
      BASE_URL:baseUrlMap[env]
    }
    
    //request.js
    import ENV from "env.config.js" 
    axios.defaults.baseURL = ENV.BASE_URL
    

    相关文章

      网友评论

        本文标题:106.配置了devServer不生效问题

        本文链接:https://www.haomeiwen.com/subject/akidurtx.html