2023.13 配置了devServer不生效问题

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，点击查看活动详情”

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。有想法的同学也可以加我微信进行交流：hp1256003949。

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

答案在这里： 在项目里面封装请求的地方，通常为request.js 会有对axios request和response的封装，在设置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