背景
在前端开发中，跨域资源共享（CORS）是一个经常被遇到的问题。由于同源策略的限制，访问来自不同域名的资源会导致浏览器不允许访问资源。这使得前端开发变得困难，限制了应用的可扩展性，也影响了用户体验。
CORS技术是一种解决这个问题的方法。在Express.js中，可以使用一些技巧来配置CORS。在本文中，我们将介绍如何在Express.js中使用CORS，为您提供深度学习和指导意义。
什么是CORS
CORS全称为Cross-Origin Resource Sharing，跨域资源共享。它是W3C标准，用来解决浏览器的同源策略限制。当我们从一个源（协议，域名，端口）获取到网络资源后，脚本可以向该源发送XMLHttpRequest请求。但是，当脚本与该源的协议，域名或端口不同时，浏览器通常会阻止这种跨源请求。
跨域资源共享的原理
CORS技术的原理是在服务器端设置HTTP响应头的Access-Control-Allow-Origin字段。浏览器在进行跨域请求时，会先发送一个OPTIONS请求，询问服务器是否允许该请求。服务器可以在响应中设置Access-Control-Allow-Origin字段，告诉浏览器是否允许跨域请求。
Express中使用CORS
在Express.js中，可以使用cors模块来设置CORS。cors模块是一个node.js中间件，它可以让您在Express.js应用中配置CORS。下面是安装cors模块的命令：
npm install cors
单个路由使用CORS
您可以在单个路由中使用CORS。下面是单个路由中使用CORS的示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -------------------- ------- ----- ---- -- - ---------- -------- ------ ------ --- --- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
在上面的示例中，我们在路由中使用cors中间件。这将允许来自任何域的跨域请求。注意，在使用cors中间件时，要将其放在路由处理程序之前。
应用程序范围内使用CORS
您还可以在Express.js应用程序范围内使用CORS。这将为您的应用中所有的路由都提供CORS支持。下面是在应用程序范围内使用CORS的示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ---------------- -------------------- ----- ---- -- - ---------- -------- ------ ------ --- --- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
在上面的示例中，我们在应用程序级别使用cors中间件。这将应用到所有路由，使应用中的所有请求都能够进行跨域请求。
配置CORS选项
除了使用默认选项外，您还可以配置CORS。cors模块支持以下选项：
- origin：设置允许的域名或IP地址
- methods：设置允许的HTTP方法
- allowedHeaders：设置允许的HTTP头
- exposedHeaders：设置暴露给客户端的HTTP头
- credentials：设置是否允许发送 cookie
- maxAge：设置缓存选项（以秒为单位）
下面是设置允许的域名或IP地址的示例：
app.use(cors({ origin: 'http://localhost:8080' }));在上面的示例中，我们允许域名为http://localhost:8080的来源进行跨域请求。
结论
CORS技术在前端开发中是一个必要的技术。Express.js提供了方便的方式来配置CORS。我们可以使用单个路由，整个应用中使用CORS，以及配置CORS选项。此外，还可以使用cors模块的其他选项来控制CORS的行为。现在，您可以在Express.js中应用CORS以使应用具有更好的扩展性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671ac3a39babaf620fa5e4ce