如何避免在 Express.js 中出现 No 'Access-Control-Allow-Origin' Header 问题？

如何避免在 Express.js 中出现 No 'Access-Control-Allow-Origin' Header 问题？

在开发前端应用时，我们经常会遇到通过 API 获取数据的情况。此时，我们的前端应用需要通过 XMLHttpRequest 对象发送请求。然而，由于同源限制的存在，这些请求会受到限制。如果请求的服务器与应用的服务器不在同一个域名下，就会出现 No 'Access-Control-Allow-Origin' Header 错误。

这个错误的出现可能会让我们的前端应用无法正常工作，因此我们需要掌握一些相关技巧来解决这个问题。本文将介绍如何在 Express.js 中避免这个问题的出现。

一、CORS

要理解如何解决 No ‘Access-Control-Allow-Origin’ Header 错误，首先需要了解 CORS。CORS（Cross-Origin Resource Sharing）是一个浏览器的安全机制，用于限制跨源 HTTP 请求。通俗地讲，就是浏览器希望我们的前端应用只能通过 XMLHttpRequest 与同源服务器通信，不允许与其他域名的服务器进行通信。不过，由于现代应用中跨域请求非常普遍，因此出现了一些跨域访问的解决方案。

二、解决方案

1. 服务器端设置 Access-Control-Allow-Origin

我们可以在服务器端设置 Access-Control-Allow-Origin 头部信息来解决这个问题。这样，服务器就会允许指定的域名或 IP 地址来跨域访问提供的 API 接口。我们可以使用 Express.js 的中间件 cors 来设置。

以下是一个示例代码：

----- ------- - -------------------
----- ---- - ----------------

----- --- - ----------

-- ---------
----- --------- - --------------------------

----- ----------- - -
    ------- -------- --------- -- -
        -- -------------------------- --- --- -
            -------------- ------
        - ---- -
            ------------ ---------- ------- -- --------
        -
    --
    --------------------- ----
    ------------ -----
--

---------------------------

在上述代码中，我们使用了 cors 中间件，并设置了一些跨域请求所需的头部信息，例如 origin、credentials、methods、headers 等。

1. 使用 JSONP 跨域请求

JSONP（JSON with padding）是一种通过动态加载