单页应用（SPA）是一种现代化的 Web 应用程序，它使用 JavaScript 从 API 获取数据，并在客户端渲染 HTML。SPA 具有许多优点，如快速响应、流畅的用户体验和灵活的前端 UI。然而，许多开发者对 SPA 应用程序中的安全问题不是很了解。本文将深入探讨 SPA 应用程序为什么不能直接访问 API，并提供一些指导意义。
API 的安全性
API 是 Web 应用程序的核心组件，它们提供了数据和功能的访问点。API 可以通过 HTTP 请求访问，并返回 JSON 或 XML 格式的数据。然而，API 的安全性是非常重要的，在许多情况下，API 会暴露您的应用程序的业务逻辑和敏感信息，因此必须采取适当的安全措施来保护它们。
跨域请求
SPA 应用程序必须通过 HTTP 请求从 API 获取数据。由于安全原因，浏览器禁止跨域请求，因此不能直接从 SPA 应用程序中访问 API。跨域请求是指从一个域名向不同的域名发出的 HTTP 请求。例如，从 www.example.com 向 api.example.com 发出的请求就是跨域请求。
跨域请求的一个主要原因是浏览器的同源策略。同源策略是指浏览器只允许从同一域名下加载资源，以防止恶意脚本攻击。同源策略可以保护用户的隐私和安全，但也限制了 Web 应用程序的功能。
解决跨域请求的问题
要解决跨域请求的问题，我们可以使用以下方法：
1. 代理请求
代理请求是一种解决跨域请求的常见方法。代理请求是指在服务器端创建一个中间层，该中间层作为客户端和服务端之间的代理，将客户端的请求发送到服务端，并将响应返回给客户端。这样，SPA 应用程序就可以从中间层代理中获取数据，而不必直接访问 API。
Node.js 代理请求示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ------ - ----------------------- ---- -- -
----- --- - ------------------------ - --------
----- ------- - -
---- ----
-------- -
------------- ---------
-
--
---------------------------
---
------------------- -- -- -
------------------- ------- -- -------------------------
---2. 跨域资源共享（CORS）
跨域资源共享（CORS）是一种允许 Web 应用程序从不同的域名请求资源的机制。CORS 是通过在响应头中添加 Access-Control-Allow-Origin 标头来实现的。该标头指定了允许访问资源的域名。
PHP CORS 示例代码：
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');3. JSONP
JSONP 是一种在客户端进行跨域请求的技术。JSONP 通过在 HTML 页面中插入一个 script 标签来加载一个 JavaScript 文件，该文件包含从 API 获取的数据。这种技术利用了浏览器允许跨域请求 JavaScript 文件的特性。
JSONP 示例代码：
-- -------------------- ---- -------
-------- ---------- --------- -
----- ------ - ---------------------------------
---------- - ----
------------- - -- -- -
----------------------
----------------
--
----------------------------------
-
-------------------------------------------------------- ------ -- -
------------------
---
-------- ---------------- -
----------- - -----
-结论
SPA 应用程序不能直接访问 API，因为跨域请求是被浏览器禁止的。要解决这个问题，我们可以使用代理请求、CORS 或 JSONP。使用这些技术可以帮助我们保护 API 的安全性，并提高 SPA 应用程序的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6763fb8d856ee0c1d4255afc