webpack - Vue3项目接口请求超时设置本地有效但上线无效的原因是什么？

Question

请问为什么我用vue3写项目的时候设置了接口的请求超时,在本地生效,上线后无效了?!
无论是在vue.config.js里配置还是直接在页面请求里添加timeout都失效.在开发环境下没问题,但是上线后这个设置就会失灵?

 devServer: {
    host: IP,
    proxy: {
      '/api': {
        target: 'http://10.10.1.90:8008/',//这里填入你要请求的接口的前缀
        ws: true,//代理websocked
        changeOrigin: true,//虚拟的站点需要更管origin
        secure: true,                   //是否https接口
        pathRewrite: {
          '^/api': ''//重写路径
        },
        timeout: 20 * 60 * 1000, // 设置超时
        proxyTimeout: 20 * 60 * 1000, // 设置代理超时
      }}}

 const axiosConfig = {
                        headers: {
                            "Content-Type": "application/json",
                        },
                        timeout: 20 * 60 * 1000, // 设置超时为 20 分钟
                    };
                    // 发送 Axios 请求
                    axios
                        .post(
                            "/api/MappingExport",
                            JSON.parse(str),
                            axiosConfig
                        )
                        .then((res) => {
                            if (res.data) {
                                This.loading("正在导入...", false);
                                This.Bullet("成功", "导入成功", "success");
                            } else {
                                This.loading("正在导入...", false);
                                This.Bullet("失败", "数据格式出错", "error");
                            }
                        })

会不会随时后端的问题?但我询问后端,后端说他也设置了相应的请求超时.那问题是出现在服务器上?服务器有个检测api前缀然后代理转发的过程

Answer 1

配置下nginx，本地proxy只在本地有效，打包上线后就没用了

Answer 2

在Vue3项目中遇到接口请求超时设置在本地有效但上线后无效的问题，通常不是由Vue或Axios直接引起的，而是可能由于几个不同的配置或环境因素导致的。以下是一些可能的原因和解决方案：

1. 代理配置仅在开发环境生效

在你的vue.config.js中配置的devServer.proxy仅适用于开发服务器（即vue-cli-service serve启动的服务）。当你将应用部署到生产环境时，这些代理设置不会被应用，因为生产环境通常不会使用webpack的开发服务器。

解决方案：

• 在生产环境中，你需要确保服务器（如Nginx、Apache或Node.js服务器）正确配置了代理转发，并包括超时设置。
• 如果你是通过Nginx等反向代理服务器进行部署，可以在Nginx配置中添加超时设置，如proxy_read_timeout。

2. Axios超时设置

你的Axios请求中确实设置了超时时间，但这仅适用于Axios客户端。如果请求在到达你的应用服务器之前就被拦截或超时（例如，在负载均衡器或CDN层），则Axios的超时设置可能不会被触发。

解决方案：

• 确保网络路径（包括任何中间层如负载均衡器）都配置了足够的超时时间。
• 检查并优化网络架构，确保请求能够顺利到达你的应用服务器。

3. 后端服务超时

虽然你说后端也设置了请求超时，但可能后端设置的超时时间太短，或者后端服务本身在处理请求时出现了延迟或问题。

解决方案：

• 与后端开发团队确认他们的超时设置，并检查是否有任何后端服务的问题可能导致请求超时。
• 考虑在后端实现更复杂的超时和重试逻辑。

4. 跨域问题

如果你的应用部署在域名A下，而API部署在域名B下，可能会涉及到跨域资源共享（CORS）的问题。虽然这与超时直接相关不大，但CORS错误有时会被误解为超时。

解决方案：

• 确保后端正确设置了CORS策略，允许来自你的前端域名的请求。
• 检查浏览器的控制台以查看是否有CORS相关的错误。

总结

通常，这类问题不是由Vue或Axios的单个配置错误引起的，而是由多个配置和环境因素共同作用的结果。检查从前端到后端的整个请求路径，包括代理服务器、网络架构和后端服务，是解决问题的关键。