在不同的 URL 而不是 localhost 上反应打开 - Javascript

当我们在编写 JavaScript 应用程序时，我们通常会将其放在本地主机（localhost）上运行，并通过访问 http://localhost:port 来测试它。但是，一旦我们将应用程序部署到生产环境中，它将不再运行在 localhost 上。因此，我们需要确保 JavaScript 程序在不同的 URL 上也能正常工作。

问题

当我们的 JavaScript 应用程序在生产环境中运行时，应用程序可能无法在不同的 URL 上正常工作。这是因为应用程序中的某些 URL 是硬编码的，它们只能在 localhost 上正常工作。如果我们不改变这些硬编码的 URL，那么应用程序就无法正常工作。

解决方案

为了解决这个问题，我们可以使用相对 URL 或根据当前 URL 动态构建 URL。

使用相对 URL

相对 URL 是相对于当前文档的 URL 而不是硬编码的 URL。例如，假设我们有以下代码：

const apiUrl = 'http://localhost:8080/api';
fetch(apiUrl)
  .then(response => response.json())
  .then(data => console.log(data));

这个代码只能在 localhost 上工作，并且在生产环境中无法正常工作。为了使它在不同的 URL 上也能正常工作，我们可以使用相对 URL：

const apiUrl = '/api';
fetch(apiUrl)
  .then(response => response.json())
  .then(data => console.log(data));

这个代码中，我们使用相对 URL /api 来代替硬编码的 URL http://localhost:8080/api，这样代码就可以在不同的 URL 上正常工作了。

根据当前 URL 动态构建 URL

如果我们无法使用相对 URL，我们可以根据当前 URL 动态构建 URL。例如，假设我们有以下代码：

const currentUrl = window.location.href;
const apiUrl = `${currentUrl}/api`;
fetch(apiUrl)
  .then(response => response.json())
  .then(data => console.log(data));

在这个例子中，我们使用 window.location.href 获取当前 URL，并将它与 /api 构建一个新的 URL。这样，我们的代码就可以在不同的 URL 上正常工作了。

结论

在编写 JavaScript 应用程序时，我们需要确保它可以在不同的 URL 上正常工作。我们可以使用相对 URL 或根据当前 URL 动态构建 URL 来解决这个问题。在使用相对 URL 或动态构建 URL 时，我们需要确保 URL 的结构是正确的，并且能够与后端 API 兼容。