javascript - Ajax中的相对路径在不同环境下工作方式不同

Question

这是一个SpringBoot网站。 html页面网址为http://xxxxx/trex/index/索引页中的javascript代码段如下

$(function(){

jQuery.ajax({
    contentType:'application/json;charset=UTF-8',
    type: "POST",
    url: "getSignTypes",
    cache: false,
    dataType: "json",
    success:function(data){
            if(data !== 'NA'){
                console.log(data);
                $('#signType').combobox({
                    valueField:'id',
                    textField:'title',
                    editable:false,
                    data:data,
                    value:data[0].id
                });
            }
    },
    error:function(msg){
        console.log(msg)
    }
});
})

你可以看到我在这个ajax请求的url参数中使用了相对路径。我想既然是相对url，应该转换成http://xxxxx/trex/index/getSignTypes 。我在本地测试了一下，是的，符合预期http://localhost:8088/trex/index/getSignTypes 。

但是当我将其部署到UAT时，我发现url被转换为http://hswcfc-trainexp-web.uat.homecreditcfc.cn/trex/getSignTypes 。索引部分消失了。

为什么Ajax中的相对路径在不同的环境下会有不同的效果？ ajax代码是完全一样的。我可以追踪任何线索来找出差异吗？谢谢。

我在这里上传了 UAT 屏幕截图。

Answer 1

HTTP URL 由几个部分组成:协议(protocol)、主机名、端口、用户名、密码、路径、查询字符串 (?....) 和片段 (#.... )。

正如所怀疑的，您的 URL 路径 在 dev 中以 / 结尾，但在 UAT 中则不然。将其视为“目录”:/trex/index/ 是 /trex/index 目录中的空文件名，而 /trex/index > 是 /trex 目录中的文件 index。 Web 服务器通常以相同的方式对待这两者，但客户端则不然:当您从那里执行相对路径时，在第一种情况下您会得到 /trex/index/getSignTypes，但 /trex/getSignTypes 在第二个。

这通常可以通过创建重定向规则来解决，这样您就不会意外地以两种不同的方式写入相同的 URL(例如，将 /trex/index 重定向到 /trex/index/)。