在前端开发中，经常会遇到 Ajax 跨域的问题。如果向非本站点的服务器请求数据，由于浏览器的同源策略，会被拦截掉。那么该如何处理这个问题呢？本文将会介绍 Express.js 中使用 CORS 方式来解决 Ajax 跨域问题。
什么是 CORS？
CORS，全称是 Cross-Origin Resource Sharing，翻译过来就是跨域资源共享。它是一种浏览器技术，可以让 Web 应用程序在一个域名下使用另一个域名下的资源。具体来说，就是通过在 HTTP 头中设置一些参数，来告诉浏览器该请求是否能被跨域访问。
如何使用 CORS？
在 Express.js 中，我们可以通过安装和使用 cors 模块来设置 CORS。
-- -- ---- -- --- ------- ---- -- -- ---- -- ----- ---- - ---------------- ----------------
上面的代码演示了如何安装和使用 cors 模块。在 Express.js 中，我们只需要在应用程序中使用 app.use() 方法来启用 cors 中间件即可。
设置 CORS 参数
在使用 cors 模块之前，我们需要先了解一些 CORS 相关的参数，以便于我们正确地配置。
origin
该参数用来设置允许访问的源。可以设置为一个字符串、一个正则表达式或者一个函数。默认情况下，origin 参数的值为 *，表示允许所有来源访问。如果设置为一个字符串或正则表达式，则只允许匹配的来源进行访问。如果设置为一个函数，则可以根据请求的来源来动态设置是否允许访问。
-------------- ------- ------------------------ -- -- ---------------------- -- ---
methods
该参数用来设置允许的 HTTP 方法。可以设置为一个字符串、一个字符串数组或者 *，表示允许所有 HTTP 方法。
-------------- -------- ------- ------- ------ --------- -- -- ------------------- ---- ---
allowedHeaders
该参数用来设置允许的 HTTP 请求头。可以设置为一个字符串、一个字符串数组或者 *，表示允许所有请求头。
-------------- --------------- ---------------- -- -- ------------ ----- ---
exposedHeaders
该参数用来设置允许浏览器访问的响应头。可以设置为一个字符串、一个字符串数组或者 false，表示不允许访问任何响应头。
-------------- --------------- ----------------- -- -- ------------- ----- ---
credentials
该参数用来设置是否允许使用 Cookie 和 HTTP 认证信息。可以设置为 true 或 false。
-------------- ------------ ---- -- ---- ------ - ---- ---- ---
使用示例
下面演示一个使用 Express.js 和 cors 模块解决 Ajax 跨域问题的示例代码。
-- -- ---------- ----- ------- - ------------------- ----- --- - ---------- -- -- ---- -- ----- ---- - ---------------- -- -- ---- -------------- ------- ------------------------- -------- ------- ------- ------ ---------- --------------- ----------------- --------------- ------------------ ------------ ---- ---- -- ---- -------------------- ----- ---- -- - ---------------- -------- --- -- ----- ---------------- -- -- - ------------------- ------- -- ------------------------ ---
在上面的代码中，我们设置了允许访问的来源为 http://www.example.com，允许的 HTTP 方法为 GET、POST、PUT、DELETE，允许的请求头为 Content-Type，允许的响应头为 Authorization，允许使用 Cookie 和 HTTP 认证信息。除此之外，我们还设置了一个 /api/data 的路由，用来演示跨域请求数据的示例。
总结
CORS 是一种解决 Ajax 跨域问题的浏览器技术，可以让 Web 应用程序在一个域名下使用另一个域名下的资源。在 Express.js 中，我们可以通过安装和使用 cors 模块来设置 CORS，从而解决 Ajax 跨域问题。同时，我们还可以根据需要设置 origin、methods、allowedHeaders、exposedHeaders 和 credentials 等参数，灵活调整 CORS 行为。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6538493b7d4982a6eb0ff5b9