未分類
31 5 月 2020

一个关于网址解析的问题

一个关于网址解析的问题

資深大佬 : JCZ2MkKb5S8ZX9pq 9

情况说明

  • 一个首页，地址是abc.com/proj/index.html。首页里调用了index.css,index.js。

  • 在本地 python 模拟 http 端口。直接输入’localhost/proj’

    • 可以定位到’index.html’
    • 且 css/js 引用正确
    • 路径显示为’localhost/proj/#/’（用了 vue-router ）

  • 上传到腾讯云 cos，直接输入’abc.com/proj’

    • 可以定位到’index.html’
    • 路径显示为’abc.com/proj’（尾部不会自动加斜杠）
    • css/js 引用错误。css 引用为’abc.com/index.css’，应该为’abc.com/proj/index.css’。
    • 如果输入地址为’abc.com/proj/’（多一个斜杠），则 css/js 引用正确。

  • 虽然最终这个页面是挂到其它域名根目录下的，但还是想请教一下。

提问

  • 这个情况是不是腾讯云造成的？（就不同服务端对这类情况处理不同）
  • 如果相对路径有没有办法对应这个问题？
  • 我能想到的方法是在 index.html 里判断一下当前路径，不行加个跳转。有没有更好的方法？
  • 另外再问一次，腾讯云 cos 渲染的字体磅数和本地渲染的不同，这个是不是也是服务器的差异导致？困扰我很久了这个问题。
大佬有話說 (8)

  • 資深大佬 : jugelizi

    统一根目录 href=/
    或者 ./

  • 資深大佬 : xiri

    资源引用不要用相对目录，用根目录就可以了吧

  • 主 資深大佬 : JCZ2MkKb5S8ZX9pq

    @jugelizi 可是如果像这种在下级目录的时候，都从”/”开始引用，等于自己要打目录名了吧，这样就变成还是要用绝对路径了是吗？
    我一开始写的就是”./index.css”，但因为腾讯云引用的时候没有加最后那个 /，所以它的”./index.css”也是从域名跟目录去引用的，所以还是失败。

  • 主 資深大佬 : JCZ2MkKb5S8ZX9pq

    @xiri 我本地开个子目录放一下 demo，将来要迁移到人家域名根目录下的，最好能有统一的写法省得搬家时候再改。

  • 資深大佬 : also24

    1 、这个情况是不是腾讯云造成的？（就不同服务端对这类情况处理不同）
    答：是腾讯云造成的，nginx 使用的 301 跳转方法更合理一些。

    2 、如果相对路径有没有办法对应这个问题？
    答：没有，这实际上是腾讯云的处理导致页面的目录结构被错误理解了。

    3 、我能想到的方法是在 index.html 里判断一下当前路径，不行加个跳转。有没有更好的方法？
    答：我暂时能想到的也只有这个方法了。

    接下来说一下具体为什么会出现这个情况，首先来看 nginx 的实现。

    当你访问 abc.com/proj/ 的时候，nginx 知道你想要访问的是 proj 这个『子目录』，
    于是 nginx 会去 proj 目录，按照配置好的 index 文件名（一般是 index.html ）去寻找相应的文件。
    当找到了 proj/index.html 后，会将它作为 proj 这个『子目录』的『主页』返回给浏览器。

    当你访问 abc.com/proj 的时候（不带斜杠），nginx 会有点迷惑，你会不会是想找一个叫 proj 的『文件』呢？
    于是 nginx 会先去看一下是否存在一个叫做 proj 的『文件』，看了看好像并没有这个『文件』；
    那么善解人意的 nginx 就会想到，你肯定是想访问 /proj/ 这个 『子目录』；
    于是 nginx 返回了一个 301 重定向，将你带去 abc.com/proj/ 访问（带斜杠）。
    再接下来，就是上面的流程了。

    // nginx 的这个功能，可以通过 absolute_redirect 参数来进行开关。

    腾讯云的 COS 的实现问题在于，当你访问 abc.com/proj 的时候（不带斜杠），善解人意的腾讯云，也猜到了你其实是想访问 /proj/ 这个 『子目录』，但是它做了一个愚蠢的决定，那就是直接将 proj/index.html 的内容返回给你。

    这让死脑筋的浏览器犯了迷糊，既然我访问 abc.com/proj 时得到了一个页面，那看来这个页面应该是属于 proj 这个『文件』的，那么当前页面所在的『目录』应该就是 abc.com/ 了。

    相关文档：
    https://cloud.tencent.com/document/product/436/32670#.E7.B4.A2.E5.BC.95.E6.96.87.E6.A1.A3

    想要解决这个问题，就需要在访问 abc.com/proj 的时候，有个明确的重定向机制（也就是 nginx 做的 301 ），这样浏览器能够明确的区分出当前页面所在的目录。

    写到这里，我想到一个方法不知道是否可行，可以试试创建一个 proj 『文件』，在里面写上手动重定向的代码，但是我不确定腾讯云的 COS 是否能正确的处理 MIME 信息。（可能需要使用自定义 Headers 功能自定义一下）

  • 主 資深大佬 : JCZ2MkKb5S8ZX9pq

    @also24 额，最后这个方法很骚，但可能导致几个问题。
    1. 腾讯云可能会直接下载非 html/图片等某几个特定类型以外的文件。
    2. 这个文件和项目目录重名。
    3. 这个文件在项目目录以外，是兄弟关系，不太好 git 。

  • 資深大佬 : also24

    @JCZ2MkKb5S8ZX9pq #6
    是的，谁叫腾讯云先给了骚操作呢。
    1 、按道理来说，改 header 可以解决。
    2 、按道理来说，COS 是对象存储，应该不担心文件和项目重名的问题
    3 、这就很难处理了

    其实我本来是想说让你在腾讯云 COS 后台配置重定向规则的，但是我试了一下，好像只支持前缀匹配，感觉也配不出想要的效果。

  • 主 資深大佬 : JCZ2MkKb5S8ZX9pq

    @also24 嗯，而且第二点在本地系统也未必支持文件和文件夹同名，我是本地同步到 cos 的。而且还放在 onedrive 下，还涉及 win 和 mac 。
    自己用 js 来 301 的话其实也有点丑陋，但一时也想不到别的办法了。