为什么我的 AJAX 调用会将 Web 主机作为 URL 前缀？

Question

我在控制台中看到以下内容

\n\n

GET http://localhost/FCC%20Projects/Show%20Local%20Weather/api.openweathermap.o\xe2\x80\xa69999&lat=43.3104064&APPID=4c45bb0e6071b74cf43da0d4aa498377&_=1440245698059 404 (Not Found)\n

\n\n

如果我取出该http://localhost/FCC%20Projects/Show%20Local%20Weather/部分并将剩余部分粘贴到浏览器栏中，我会从 api 服务获得正确的响应。 \n我在 gh-pages 上遇到相同的问题，只不过它以 GitHub 地址为前缀。 http://adoyle2014.github.io/FCC-ShowLocalWeather/

\n\n

function apiCall(lat, long) {\n  $.ajax({\n    url: "api.openweathermap.org/data/2.5/weather?",\n    jsonp: "jsonp",\n    dataType: "jsonp",\n    data: {\n      lon: long,\n      lat: lat,\n      APPID: apiKey\n    },\n    success: function (response) {\n      parseWeather(response);\n    }\n  });\n

\n\n

为什么此 api 调用会在 url 前面添加当前网站地址？

\n

Answer 1

它将当前 URL 添加到 API URL 之前的原因是因为您提供的 URL 不以 开头http://，这意味着它是相对 URI。他们认为这个 URI 是相对于当前 URL 的，因此他们将当前 URL 添加到它的前面，然后从那里开始。

要解决此问题，只需将 URI 开头为http://：

function apiCall(lat, long) {
    $.ajax({
        //This is our fix:
        url: "http://api.openweathermap.org/data/2.5/weather?",
        jsonp: "jsonp",
        dataType: "jsonp",
        data: {
            lon: long,
            lat: lat,
            APPID: apiKey
        },
        success: function (response) {
            parseWeather(response);
        }
    });
}

有关相对 URI 与绝对 URL 的更多信息，请访问印第安纳大学的本教程。