背景介绍

在现代Web开发中，前后端分离架构变得越来越普遍，这种架构下，前端和后端在不同的端口或不同的域名上运行，因此不可避免地涉及到跨域请求的问题，为了提高应用的灵活性和可维护性，前端代码通常需要动态获取服务器路径，本文将详细探讨几种常见的前端获取服务器路径的方法及其实现方式。

一、使用相对路径

什么是相对路径？

相对路径是相对于当前文件或目录的路径，它通过使用./（表示当前目录）和../（表示上级目录）来定位资源。

为什么使用相对路径？

相对路径的主要优点是它的简洁性和灵活性，不需要知道服务器的具体域名或IP地址，只需知道资源相对于当前页面的位置，相对路径在不同环境下易于迁移和调整。

如何实现？

在HTML文件中使用相对路径引用资源：

<img src="./images/logo.png" alt="Logo">
<script src="../js/app.js"></script>

优势与劣势

优势：

- 简单直观，易于理解和使用

- 不依赖于具体的服务器域名或IP地址

- 易于在不同环境中迁移和部署

劣势：

- 在深层次目录结构中，路径可能会变得复杂和难以维护

- 对于跨域资源无法直接使用相对路径访问

二、使用绝对路径

什么是绝对路径？

绝对路径是从根目录开始的完整路径，包括协议、主机名和具体路径。http://example.com/images/logo.png。

为什么使用绝对路径？

绝对路径能够准确定位资源的完整位置，适用于需要精确控制资源位置的场景，绝对路径可以解决跨域问题，因为浏览器会将绝对路径视为同源。

如何实现？

在HTML文件中使用绝对路径引用资源：

<img src="http://example.com/images/logo.png" alt="Logo">
<script src="http://example.com/js/app.js"></script>

优势与劣势

优势：

- 能够精确定位资源的位置，避免路径错误

- 解决跨域问题，因为浏览器会将绝对路径视为同源请求

劣势：

- 不够灵活，修改服务器域名或路径时需要更改所有绝对路径

- 暴露了服务器的真实路径，可能带来安全隐患

三、使用Ajax请求

什么是Ajax请求？

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，仅更新部分页面内容的技术，通过Ajax请求，前端可以向服务器发送请求并获取数据。

为什么使用Ajax请求？

Ajax请求可以在后台与服务器进行通信，获取所需的数据或路径信息，这种方式适用于需要在运行时动态获取服务器路径的场景。

如何实现？

使用JavaScript的XMLHttpRequest对象或fetch API发送Ajax请求：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getServerPath', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var serverPath = xhr.responseText;
        console.log(serverPath);
    }
};
xhr.send();

或使用fetch API：

fetch('/api/getServerPath')
    .then(function(response) {
        return response.text();
    })
    .then(function(serverPath) {
        console.log(serverPath);
    });

优势与劣势

优势：

- 动态获取服务器路径，适用于需要在运行时确定路径的场景

- 可以通过一次请求获取多个配置信息，减少请求次数

劣势：

- 需要后端提供相应的接口支持

- 增加了前端代码的复杂性和维护难度

四、使用环境变量

什么是环境变量？

环境变量是一种在操作系统层面上存储系统信息的手段，在前端开发中，环境变量可以用来管理不同环境下的配置信息，如开发环境、测试环境和生产环境的服务器路径。

为什么使用环境变量？

使用环境变量可以使前端代码根据不同的环境动态获取服务器路径，从而提高应用的灵活性和可维护性，这种方式特别适用于构建工具（如Webpack、Vite等）支持的环境变量配置。

如何实现？

在项目根目录下创建.env文件，定义不同环境的变量：

.env.development
VUE_APP_API_URL=http://localhost:8080/api
.env.production
VUE_APP_API_URL=https://api.productionserver.com

在构建工具（如Webpack）中加载环境变量：

// webpack.config.js
const webpack = require('webpack');
const dotenv = require('dotenv');
const path = require('path');
const env = dotenv.config({ path: path.resolve(__dirname, '.env') });
const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[next] = JSON.stringify(env[next]);
    return prev;
}, {});
module.exports = {
    plugins: [
        new webpack.DefinePlugin({ 'process.env': envKeys }),
    ]
};

在前端代码中使用环境变量：

const apiUrl = process.env.VUE_APP_API_URL;
console.log(apiUrl);

优势与劣势

优势：

- 根据不同环境动态配置服务器路径，提高灵活性和可维护性

- 避免硬编码，减少人为错误的可能性

- 适用于构建工具支持的环境变量配置，易于集成和管理

劣势：

- 需要构建工具支持环境变量配置，不适用于所有项目类型

- 初次配置可能需要一定的学习和设置成本

五、使用配置文件

什么是配置文件？

配置文件是一种用于存储应用程序配置信息的外部文件，在前端开发中，可以使用JSON、YAML等格式的配置文件来管理服务器路径等信息。

为什么使用配置文件？

配置文件集中管理配置信息，便于维护和修改，通过引入不同的配置文件，可以轻松切换不同环境的配置。

如何实现？

在项目根目录下创建配置文件，如config.json：

{
    "development": {
        "apiUrl": "http://localhost:8080/api"
    },
    "production": {
        "apiUrl": "https://api.productionserver.com"
    }
}

在前端代码中根据当前环境加载对应的配置：

let config;
if (process.env.NODE_ENV === 'development') {
    config = require('../config/config.development.json').development;
} else {
    config = require('../config/config.production.json').production;
}
console.log(config.apiUrl);

优势与劣势

优势：

- 集中管理配置信息，便于维护和修改

- 轻松切换不同环境的配置，提高灵活性

- 不依赖于构建工具，适用于各种类型的项目

劣势：

- 需要额外的配置文件和加载逻辑，增加了项目的复杂性

- 如果配置文件泄露，可能会带来安全隐患

六、使用后端提供的接口

什么是后端提供的接口？

后端提供的接口是指由后端服务器提供的API接口，前端可以通过调用这些接口获取服务器路径或其他配置信息，这种方式适用于需要在运行时动态获取配置信息的场景。

为什么使用后端提供的接口？

后端提供的接口可以实现前后端的完全分离，前端无需关心具体的服务器路径或配置信息，只需调用后端接口即可获取所需的数据，这种方式提高了系统的灵活性和可扩展性。

如何实现？

后端提供一个获取服务器路径的接口：

// Node.js示例
const express = require('express');
const app = express();
const port = 8080;
const host = 'localhost';
app.get('/api/getServerPath', (req, res) => {
    res.json({ serverPath:http://${host}:${port}/ });
});
app.listen(port, () => {
    console.log(Server is running on http://${host}:${port});
});

前端调用后端接口