Relative path in Script src and Link rel keeps resolving to root URL

Question

I have a document located at http://localhost:8081/develop.

The index.html, located at http://localhost:8081/develop/index.html contains the following:

<html>
    <head>
        ...
        <link rel="stylesheet" href="./styles.min.css">
        <script src="./bower_components/jquery/dist/jquery.js"></script>
        <script src="./bower_components/moment/min/moment-with-locales.js"></script>
        <script src="./bower_components/elessar/dist/elessar.js"></script>
        <script src="./bower_components/EventSource/eventsource.js"></script>
        ...
    </head>
    <body>
        ...
    </body>
</html>

ALL of the files starts with a ./, telling the browser that it should search them in the current directory, for example: <script src="./bower_components/jquery/dist/jquery.js"></script> should resolve into http://localhost:8081/develop/bower_components/jquery/dist/jquery.js. That's obvious.

But it doesn't. Instead, they are being resolved into http://localhost:8081/bower_components/jquery/dist/jquery.js, throwing tons of errors in the console.

The same thing will happen if instead of using ./ in the beginning of the files, I'd remove the first slash: <script src="bower_components/jquery/dist/jquery.js"></script> also resolves into http://localhost:8081/bower_components/jquery/dist/jquery.js.

It feels like a very basic question but I really need that those files have relative paths and that those paths works as expected. So why aren't them?

Can you share what's the DOCTYPE or could you try changing the DOCTYPE? If I am not wrong then `./` works with non-strict DOCTYPE. — Shubh, Sep 16 '16 at 12:52
It's has nothing to do with JS. Check your local server configuration... — Bozidar Sikanjic, Sep 16 '16 at 12:58
@BozidarSikanjic It has nothing to do with the server either. You can see in the screenshot attached that when I hover the mouse over the link, Chrome will show the URL it *thinks* it's the correct. — Bruno Finger, Sep 16 '16 at 13:40
http://stackoverflow.com/questions/24028561/relative-path-in-html — Bozidar Sikanjic, Sep 17 '16 at 19:40

score 15 · Accepted Answer · answered Sep 18 '17 at 06:57

15

Reason can be tag <base href="/"> in the head section.

answered Sep 18 '17 at 06:57

Pavel

2,602
1
27
34

This happened long ago but I still remember months later I figured out yes it was exactly for this reason. – Bruno Finger Sep 18 '17 at 14:01
You're a life saver. – willurd Jan 11 '19 at 22:40
1

Another reason I found that this happened was due to a load balancer (nginx) re-writing the URL to be at the root. So all requests `https://host/some/path/afile.js` where mapped to `GET /afile.js` so if you have a load balancer, like apache, or nginx a mis-configured rewrite rule might be messing things up. – PatS Apr 16 '21 at 01:13

Relative path in Script src and Link rel keeps resolving to root URL

1 Answers1