传入变量作为axios请求url时出现isURLSameOrigin undefined报错如何解决

问题触发原因 #

你遇到的Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')报错，是axios内部解析请求URL时，接收到的URL值为undefined导致的，核心诱因有以下几类：

• 参数传递错位：调用filter.filterSubmit时传参顺序为(selectTypeId, url)，如果filterSubmit方法定义时参数顺序写反、或者参数名存在大小写拼写错误，就会导致方法内部拿到的url是undefined
• 封装逻辑冲突：你自定义封装的http实例如果存在请求拦截器，可能存在对config.url的错误改写逻辑，把正常传入的URL覆盖成了undefined
• 作用域变量异常：极少数场景下，setTimeout回调里定义的url变量可能受上层作用域同名变量影响，最终传入方法时值异常

解决方案 #

1. 先排查参数传递是否正常，在filterSubmit方法开头打印传入的url值，确认是否为undefined：

filterSubmit(selectTypeId, url) {
  // 新增打印排查，结果为undefined则说明是参数传递问题
  console.log('接收到的URL：', url)
  http({
      method: 'post',
      url: url,
      data: {
          item_type_id: selectTypeId,
      }
    })
}

如果打印结果为undefined，优先核对方法定义的参数顺序、参数名拼写是否和调用时一致。
2. 如果打印的URL值正常，检查你封装的http实例的请求拦截器逻辑，排查是否存在对config.url的错误改写，比如错误的baseURL拼接逻辑覆盖了原有URL。
3. 临时兜底处理可以给URL配置加默认值，避免undefined传入axios：

http({
  method: 'post',
  url: url || '/register-item/categories',
  data: {
      item_type_id: selectTypeId,
  }
})

内容的提问来源于stack exchange，提问作者zyyyzzz