当前位置：首页 > news >正文

前端Vue之Request URL：请求地址乱套问题记录

news 来源：原创 2024/5/6 8:27:07

问题背景：

修改配置文件 .env.development 和 vue.config.js

重启前台服务器，请求后端接口时一直报错，请求不成功

F12 打开浏览器控制台面板，查看 Network 网络面板

找到报错的请求，能够看到

Headers 请求头下面的

General 里面的 Request URL：地址信息错乱了

平时正常的地址显示：

http://12.34.567.89:8080/api/xxx/xxxxxx

现在错乱后的地址显示：

http://localhost:8888/%22http://12.34.567.89:8080%22/api/xxx/xxxxxx

Preview 下面显示：

Proxy error ： Could not proxy request

/%22http://12.34.567.89:8080%22/api/xxx/xxxxxx

from localhost:3333 to http://12.34.567.89:8080 ( ECONNREFUSED ) .

这问题看到了还真的是一阵头皮发麻啊，就有一种无从下手的感觉，

为什么呢？因为我们两个前端需要跟四个后端进行接口联调嘛

就唯独其中一个后端的请求报错，改成另外三个后端的都没有问题，正常请求，

前端代码啥也没改，只改了配置文件 .env.development 和 vue.config.js

为了调整不成不同后端的域名，方便和对应的后端人员联调接口，

所以说三个后端的都好好的，就唯独其中一个请求就地址出问题了，真的很无奈。。

后来经过另外一个前端小伙伴的请教，说是可能是

1、配置文件 .env.development 里面

双引号 " " 的问题，改成单引号 ‘ ’ 试试

（大概率是因为使用了双引号的原因，因为也找不出是其它啥原因改好的了。。）

原错误配置文件 .env.development 代码：

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = 'http://69life.cf.ok'
# VUE_APP_BASE_API = 'http://127.0.0.1'

# 后端1号的ip地址
VUE_APP_BASE_API = "http://80.0.0.1:8080"
# 后端2号的ip地址
# VUE_APP_BASE_API = "http://81.0.0.2:8080"
# 后端3号的ip地址
# VUE_APP_BASE_API = "http://82.0.0.3:8080"
# 后端4号的ip地址
# VUE_APP_BASE_API = "http://82.0.0.4:8080"

VUE_CLI_BABEL_TRANSPILE_MODULES = true

修改后正确的配置文件 .env.development 代码：

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = 'http://69life.cf.ok'
# VUE_APP_BASE_API = 'http://127.0.0.1'

# 后端1号的ip地址
VUE_APP_BASE_API = 'http://80.0.0.1:8080'
# 后端2号的ip地址
# VUE_APP_BASE_API = 'http://81.0.0.2:8080'
# 后端3号的ip地址
# VUE_APP_BASE_API = 'http://82.0.0.3:8080'
# 后端4号的ip地址
# VUE_APP_BASE_API = 'http://82.0.0.4:8080'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

2、 src / utils / request.js 二次封装 axios 文件里面配置的

baseURL 设置基础路径信息可能有问题 ( 结果发现不是 )

3、最后如果还是不行的话，那就看一看你的 vue.config.js 这个配置文件

看一看里面的 devServer 对象里面的代理配置那块写的有没有问题

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://12.34.567.89:8080', // 检查一下这里你有没有写错 ， 以及尝试切换一下单双引号的问题
      }
    }
  }
}

好啦，上面就是个人遇到此问题的全部解决思路了，

要是还不行的话，那就请教你身边的大佬出马吧，

别耽误时间，开发进度要紧