Ajax调用省略项目名时路径异常，如何无需填写完整URL？

以下是几种无需手动填写完整URL的解决方案：

• 设置HTML的<base>标签
  在页面<head>中添加base标签，指定项目的根路径，所有相对路径都会自动基于该路径拼接：

<base href="http://192.168.0.10/demo_projects/">

之后Ajax请求只需写接口名（注意不要加开头的/）：

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: "POST",
    url: "check_login", // 自动拼接为 http://192.168.0.10/demo_projects/check_login
    data: {login_name: login_name},
    success : function(res){
        // 处理返回结果
    }
});

• 全局配置jQuery Ajax默认前缀
  在项目公共JS文件里统一设置Ajax的基础路径，后续所有请求都不用重复写前缀：

// 全局配置基础路径
$.ajaxSetup({
    baseUrl: "http://192.168.0.10/demo_projects/"
});

// 发起请求时只需写接口路径
$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: "POST",
    url: "check_login",
    data: {login_name: login_name},
    success : function(res){
        // 处理逻辑
    }
});

如果不想硬编码IP，可动态获取当前站点信息：

const basePath = window.location.origin + '/demo_projects/';
$.ajaxSetup({
    baseUrl: basePath
});

• 定义全局基础路径变量
  在项目中定义一个全局的基础路径变量，每个Ajax请求时拼接接口名：

// 定义基础路径（可动态获取避免硬编码）
const baseUrl = window.location.origin + '/demo_projects/';

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: "POST",
    url: baseUrl + "check_login",
    data: {login_name: login_name},
    success : function(res){
        // 处理返回结果
    }
});

内容的提问来源于stack exchange，提问作者Kashish Agarwal