处理跨域请求的最佳实践：使用 Express.js 和 CORS 中间件
在前端开发中，我们经常会遇到跨域请求的问题。由于浏览器同源策略的限制，浏览器会阻止在不同源之间进行的 AJAX 调用、Web字体资源的下载、图像和视频的嵌入等请求。这篇文章将介绍如何使用 Express.js 和 CORS 中间件来处理跨域请求。
什么是跨域请求?
跨域请求（Cross-Origin Resource Sharing，简称CORS）指的是当一个资源的请求来源与该资源所在的域名、协议或端口不同时，就会发生跨域请求。下面是几种常见的跨域情况：
- 域名不同：如 http://example.com 请求 http://test.com。
- 协议不同：如 https://example.com 请求 http://example.com。
- 端口不同：如 http://example.com:8080 请求 http://example.com:8081。
跨域请求的产生，是为了保障网站的安全性，避免恶意站点骗取用户信息等，但同样也会引发开发者调试开发时的一些困扰。
CORS 原理
CORS标准规定了浏览器在向跨域服务器请求资源时，需要先发送一个预请求（preflight request）进行验证。该请求是一个 OPTIONS 请求，向服务器端发送 Access-Control-Request-Method 和 Access-Control-Request-Headers 请求头，询问服务器是否允许跨域请求，服务器端返回的 Access-Control-Allow-Origin 头将告诉浏览器是否允许跨域请求。
如果服务器返回 Access-Control-Allow-Origin: *，则会允许来自所有域名的请求；如果设置 Access-Control-Allow-Origin 的值为请求源头，如 Access-Control-Allow-Origin: http://example.com，则只允许来自 http://example.com 的请求。
CORS 配置方法
下面的代码演示了如何使用 Express.js 和 CORS 中间件来处理跨域请求：
const express = require('express'); const cors = require('cors');
const app = express();
app.use(cors());
app.get('/', (req, res) => { res.send('Hello World!'); });
app.listen(3000, () => { console.log('Server started on port 3000'); });
在代码中，我们引入了 Express.js 和 CORS 中间件。通过调用 app.use(cors())，我们可以将 CORS 中间件挂载到 Express 应用中，从而使其在所有请求中启用。这样，Express 应用便可以接受跨域请求。
然而，为了保证安全性，我们通常不会允许所有域都能跨域请求。我们可以通过设置 cors 中间件的配置项来控制允许跨域的域名或源、请求头、响应头等。
const corsOptions = { origin: 'http://example.com', methods: 'GET,POST,PUT,DELETE', allowedHeaders: 'Content-Type,Authorization', };
app.use(cors(corsOptions));
在 corsOptions 中指定 origin、methods 和 allowedHeaders 配置项，用于设置允许跨域请求的域名、请求方法、允许请求头等信息。通过这种方式，我们可以更加灵活地控制跨域请求的传输。
总结
跨域请求是前端开发中常见的问题，通过使用 Express.js 和 CORS 中间件可以快速轻松地解决跨域请求的问题。在实际开发中，我们需要根据项目需求和安全性要求制定合适的 CORS 配置，来达到允许局部域名跨域请求、限制某些域名的请求以及允许特定请求头等目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64afb5a548841e9894bd5331