这里重要的是你需要理解backend和frontend这两个术语。
根据定义,网站是可以使用 HTTP 从服务器加载的东西,它由 HTML 和 CSS 和/或 Javscript 组成。
现在,根据定义,在该服务器上运行的每个代码都是后端。在用户浏览器中运行的所有代码都被视为前端。如果网站只包含服务器生成的 HTML 和 CSS,那么进行这种分离就没有多大意义。这意味着如果我们同时拥有前端和后端,我们只会讨论它们。
这也意味着在浏览器中运行的前端代码必须由后端交付。没有后端的前端不能存在。
让我们看一个小例子。如果用户在浏览器中输入example.com,浏览器将向example.com 发出HTTP GET 请求。服务器(以及后端)将响应一个 HTML 文件。该文件现在可以嵌入带有<script src="/code.js"> 的javascript 文件。现在浏览器对example.com/code.js 执行另一个HTTP GET 并且服务器(以及后端)返回该文件。在该文件中可能有一些在浏览器中执行的前端代码。
现在也许这个文件想要从后端加载一些数据。所以它做了一个fetch('/api/data). The browser does anotherHTTP GETtoexample.com/api/data` 并且后端必须响应。现在,虽然后端相对而言是愚蠢的,并且只交付了文件,但它现在实际上可以执行一些逻辑。也许从数据库等加载数据。然后它将数据发送到前端,然后前端可以使用该数据做一些事情。
这意味着在生产环境中,您的后端必须交付前端代码。在此示例中,初始 HTML 文件和 code.js 文件。
因此,根据定义,您想要的是不可能的。前端在浏览器中运行,因此无法在 localhost 上交付代码。如果可以,它将成为后端。
现在,虽然真正的后端在生产环境中交付前端代码很常见,但在开发中并不常见。拥有一个仅用于开发的单独的简约服务器是很常见的。 python -m SimpleHTTPServer 就是这样一个工具,因此可以完成这项工作。
有时这也在生产中完成。然后你的后端是example2.com,你的前端是example.com。但这必不可少意味着运行第二个后端只是为了交付前端。通常对于生产来说,这是一个成熟的 Web 服务器,例如 nginx、apache 或 IIS(你需要 CORS,见下文)。与它们相反,python -m SimpleHTTPServer 等工具不应用于生产。
现在这意味着您基本上可以使用任何类型的后端来交付您的前端进行开发。稍后您将把您的代码提供给您的后端开发人员,然后他将使用他的后端部署它。但是有一个悬而未决的问题:
您的前端和后端将如何通信?
在生产中,你的前端可以fetch 一些东西,如果你的后端提供你的前端,它就会工作。但是对于开发(以及测试),您可能已经想使用后端而不实际在您的计算机上启动它。为此,基本上有两种方法。
首先,您的开发后端可以将未知请求代理到后端。这意味着如果您的真实后端在example.com 上运行并且您在localhost 上启动了一个开发服务器,该服务器会将所有不是现有文件的请求代理到example.com。因此,如果您请求 localhost/code.js 并且文件 code.js 确实存在,您的服务器将响应该文件。如果您请求 localhost/data 并且您没有名为 data 的文件,您的服务器应该向 example.com/data 发出请求并返回该响应。这是很常见的。根据您用于前端开发的工具、库和框架,它们具有具有该功能的集成开发服务器。例如,如果您使用ember.js 进行开发,您可以使用ember server --proxy=http://example.com。它将在localhost:4200 上运行具有该行为的服务器。 create-react-app 等其他工具也允许这样做。
其次,您可以使用 CORS。这必须由后端实现,并允许来自另一台服务器的前端访问后端。如前所述,如果您从两个不同的服务器运行前端和后端,也需要这样做。
如果后端正确实现了 CORS,您只需执行 fetch('example.com/data) 即可获取您的数据,并且此 Javascript 不得由 example.com 交付,它会正常工作。但是 CORS 使安全性复杂化。