【问题记录】输入url地址，访问验证码图片失败的解决方案！！！

项目场景：

现有一个项目已经开发到一半了，这个项目的开发人员均在A城市，而我以及其它后续参与进来的开发工程师在B城市，也就是要异地协同开发该项目。我和后续参与进来的开发工程师负责部分模块开发，现需拉取项目代码进行研究，了解大致内容。代码托管平台是gitee。

---

问题描述

在gitee上拉取公司项目代码后，便在本地启动前端项目，访问项目登录界面，但是登录界面中的验证码图片访问异常，获取不到验证码。

---

过程描述：

1. 打开开发者工具或按下F12，点击网络一栏
2. 单点验证码404图片，查看验证码图片请求访问相关信息
3. 查看请求地址
4. 在浏览器url地址栏中输入验证码图片请求地址
5. 在浏览器界面中查看返回的响应信息是成功还是失败
   1. 若成功，证明访问的请求地址是没有问题的
   2. 若失败，则证明访问的请求地址有误
6. 若是步骤5中的第二种情况，则查看该项目的测试环境的验证码图片请求网址，用其跟上述地址做对比，查看路径是否有误
   1. 若有误，则在浏览器url地址栏中输入新的请求地址，若响应信息显示成功，则表示之前的验证码图片请求网址有误，需要修改
   2. 若没有，则需要看看是否给了其它错误信息
7. 经过上述步骤，已经证明是验证码图片请求的网址有误，多了一个路径“/xxx”
8. 接下来，就要在项目代码中查找，是什么地方进行网址拼接时除了差错。
   1. 先找到项目的界面入口，查看“window._CONFIG['domianURL']”配置的值是什么，是否有误
   2. 步骤一没问题，则接着查找项目的配置文件（本项目是vite.config.js）中是否做了什么代理。步骤二经过多番查找以及修改后，发现验证码图片依然访问失败，则转至步骤三。
   3. 查看访问验证码图片的界面位置，查看请求资源时发送的网址是什么，若发送的网址无误，则转至步骤四。
   4. 全局搜索多余的路径“/xxx”，查看是不是某处在做网址拼接时，将“/xxx”加上了。最终发现是在request.js文件中，默认给baseUrl做了地址拼接。

// 创建 axios 实例
const service = axios.create({
  //baseURL: window._CONFIG['domianURL'] + "/xxx", // api base_url
  baseURL: window._CONFIG['domianURL'], // api base_url
  timeout: 15000, // 请求超时时间
})

---

原因分析：

1. 初步判断，是验证码图片访问地址有误，只要找到源头，修改地址即可
2. 由于该项目是在开发阶段，说明A城市的开发人员是可以正常使用该配置访问验证码图片的。所以我猜想是A城市那边做了nginx配置等，可能做了代理或者请求源访问限制等，从而A城市的开发人员可以正常访问项目，而我在未做任何nginx配置的情况下不能直接访问验证码图片吧。

---

解决方案：

1. 找到request.js界面，修改baseUrl，去掉“/xxx”后缀
2. 找A城市的开发人员询问，看看是不是需要增加什么nginx配置等

1. // 创建 axios 实例
   const service = axios.create({
     //baseURL: window._CONFIG['domianURL'] + "/xxx", // api base_url
     baseURL: window._CONFIG['domianURL'], // api base_url
     timeout: 15000, // 请求超时时间
   })