JQueryで$.ajaxを使ってJSONPファイルを読み込む際に、404エラーが出る

Question

環境

Windows 10
XAMPP 7.4.3

問題

JavaScriptから非同期通信でJSONPファイルを読み込みたいのですが、JSONPを読み込めません。
var urlで指定したURLをchromeに直接貼り付けるとJSONPの中身が表示されます。
なぜURLを読み込めないのでしょうか。
教えていただきたいです。

chromeのデベロッパーツールを確認すると以下のように表示されます。

jquery-3.3.1.min.js:2 
GET http://localhost/vue.js_sample/chapter4/4-5/local/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AEURL/products.js?callback=products&_=1588591737923 404 (Not Found)
send                    @jquery-3.3.1.min.js:2
ajax                    @jquery-3.3.1.min.js:2
created                 @main.js:27
invokeWithErrorHandling @vue.js:1863
callHook                @vue.js:4220
Vue._init               @vue.js:5002
Vue                     @vue.js:5078
(anonymous)             @main.js:6

ファイル

created: function() {
    // JSONPのURL
    var url = 'localhost/vue.js_sample/chapter4/4-5/server/products.js';
    // 非同期通信でJSONPを読み込む
    $.ajax({
      url : url,
      type: 'GET',
      dataType: 'jsonp',
      jsonp: 'callback',
      jsonpCallback: 'products'
    })
    .done(function(data, textStatus, jqXHR) {
      this.products = data;
    }.bind(this))
    .fail(function(jqXHR, textStatus, errorThrown) {
      this.isError = true;
      this.message = '読み込みに失敗しました。';
    }.bind(this));
  },