在 Web 开发中,跨域请求是很常见的情况。例如,前端代码在一个域名下运行,但需要请求另一个域名下的 API 接口。这时候,根据同源策略的限制,前端请求会被浏览器拦截。CORS(跨域资源共享)机制可以解决这个问题。在 Express.js 中,我们可以通过配置来处理 CORS 请求。
什么是 CORS
CORS 是一种跨域资源共享的机制,可以让 Web 应用为了安全地与其它域名下的 API 进行交互而遵循的标准规范。这种交互需要在服务端配置响应头,而且只有服务器响应头中包含了 CORS 相关信息,浏览器才会允许跨域请求。否则,浏览器将拦截跨域请求,并返回一个错误。
如何在 Express.js 中处理 CORS 请求
在 Express.js 中我们可以使用 cors 这个 npm 包来设置 CORS 相关响应头。首先,我们需要安装 cors npm 包:
npm install cors
然后,在 Express.js 服务中使用 cors:
const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors());
默认情况下,cors 中间件设置了最宽松的 CORS 响应头,允许所有的跨域请求。如果你需要更加定制化的 CORS 响应头,可以传递包含配置选项的对象作为参数,例如:
const corsOptions = { origin: 'https://example.com', optionsSuccessStatus: 200 } app.use(cors(corsOptions));
这个例子中,我们传递了一个配置对象 corsOptions
,指定了允许的请求源 origin
和响应状态码 optionsSuccessStatus
。
手动设置 CORS 相关响应头
除了使用 cors 中间件之外,我们还可以通过手动设置响应头来处理 CORS 请求。例如,以下代码可以让任何在指定端口中发送的请求来自指定源的请求都能通过:
app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', 'http://example.com:8080'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); });
在上述代码中,我们通过设置相应的响应头来允许跨域请求通过。Access-Control-Allow-Origin
表示允许的请求源;Access-Control-Allow-Methods
和 Access-Control-Allow-Headers
表示允许的请求方法和请求头。
总结
CORS 是一种跨域资源共享的机制,可以让 Web 应用为了安全地与其它域名下的 API 进行交互而遵循的标准规范。在 Express.js 中,我们可以通过使用 cors 中间件或手动设置响应头来处理 CORS 请求。为了保证 Web 应用的安全性,我们应该根据实际需求设置合适的 CORS 响应头。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/648744c348841e98945f3e11