CORS 是一个 node.js 包,用于提供一个 Connect/Express 中间件,可用于启用 CORS,并提供各种选项。
这是一个通过 npm 注册表 可用的 Node.js 模块。安装使用 npm install
命令
$ npm install cors
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
var express = require('express')
var cors = require('cors')
var app = express()
app.get('/products/:id', cors(), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for a Single Route'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
var express = require('express')
var cors = require('cors')
var app = express()
var corsOptions = {
origin: 'http://example.com',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for only example.com.'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
此模块支持使用提供给 origin
选项的函数动态验证来源。此函数将传递一个字符串,该字符串是来源(如果请求没有来源,则为 undefined
),以及一个具有签名 callback(error, origin)
的 callback
。
回调的 origin
参数可以是中间件 origin
选项允许的任何值,除了函数。有关所有可能值类型的更多信息,请参阅 配置选项 部分。
此函数旨在允许从后端数据源(如数据库)动态加载允许的来源。
var express = require('express')
var cors = require('cors')
var app = express()
var corsOptions = {
origin: function (origin, callback) {
// db.loadOrigins is an example call to load
// a list of origins from a backing database
db.loadOrigins(function (error, origins) {
callback(error, origins)
})
}
}
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for an allowed domain.'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
某些 CORS 请求被认为是“复杂”的,需要一个初始的 OPTIONS
请求(称为“预检请求”)。“复杂” CORS 请求的一个例子是使用除 GET/HEAD/POST 之外的 HTTP 动词(如 DELETE)或使用自定义标头的请求。要启用预检,您必须为要支持的路由添加一个新的 OPTIONS 处理程序。
var express = require('express')
var cors = require('cors')
var app = express()
app.options('/products/:id', cors()) // enable pre-flight request for DELETE request
app.del('/products/:id', cors(), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
您也可以像这样全局启用预检
app.options('*', cors()) // include before other routes
注意:当将此中间件用作应用程序级中间件(例如,app.use(cors())
)时,所有路由的预检请求都已处理。
var express = require('express')
var cors = require('cors')
var app = express()
var allowlist = ['http://example1.com', 'http://example2.com']
var corsOptionsDelegate = function (req, callback) {
var corsOptions;
if (allowlist.indexOf(req.header('Origin')) !== -1) {
corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS response
} else {
corsOptions = { origin: false } // disable CORS for this request
}
callback(null, corsOptions) // callback expects two parameters: error and options
}
app.get('/products/:id', cors(corsOptionsDelegate), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for an allowed domain.'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
origin
:配置 Access-Control-Allow-Origin CORS 标头。可能的值
Boolean
- 将 origin
设置为 true
以反映 请求来源,如 req.header('Origin')
所定义,或将其设置为 false
以禁用 CORS。String
- 将 origin
设置为特定来源。例如,如果您将其设置为 "http://example.com"
,则只允许来自“http://example.com”的请求。RegExp
- 将 origin
设置为将用于测试请求来源的正则表达式模式。如果匹配,将反映请求来源。例如,模式 /example\.com$/
将反映来自以“example.com”结尾的来源的任何请求。Array
- 将 origin
设置为有效来源的数组。每个来源可以是 String
或 RegExp
。例如,["http://example1.com", /\.example2\.com$/]
将接受来自“http://example1.com”或“example2.com”的子域的任何请求。Function
- 将 origin
设置为实现某些自定义逻辑的函数。该函数将请求来源作为第一个参数,并将回调(作为 callback(err, origin)
调用,其中 origin
是 origin
选项的非函数值)作为第二个参数。methods
:配置 Access-Control-Allow-Methods CORS 标头。需要逗号分隔的字符串(例如:‘GET,PUT,POST’)或数组(例如:['GET', 'PUT', 'POST']
)。allowedHeaders
: 配置 **Access-Control-Allow-Headers** CORS 标头。需要一个逗号分隔的字符串(例如:‘Content-Type,Authorization’)或一个数组(例如:['Content-Type', 'Authorization']
)。如果未指定,则默认反映请求的 **Access-Control-Request-Headers** 标头中指定的标头。exposedHeaders
: 配置 **Access-Control-Expose-Headers** CORS 标头。需要一个逗号分隔的字符串(例如:‘Content-Range,X-Content-Range’)或一个数组(例如:['Content-Range', 'X-Content-Range']
)。如果未指定,则不会公开任何自定义标头。credentials
: 配置 **Access-Control-Allow-Credentials** CORS 标头。设置为 true
以传递标头,否则将省略。maxAge
: 配置 **Access-Control-Max-Age** CORS 标头。设置为整数以传递标头,否则将省略。preflightContinue
: 将 CORS 预检响应传递给下一个处理程序。optionsSuccessStatus
: 提供一个状态代码,用于成功处理 OPTIONS
请求,因为某些旧浏览器(IE11、各种智能电视)无法处理 204
。默认配置等效于
{
"origin": "*",
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
"preflightContinue": false,
"optionsSuccessStatus": 204
}
有关每个 CORS 标头影响的详细信息,请阅读 这 篇关于 web.dev 的文章。
使用 React 演示 CORS 工作(以及不工作)的演示,请访问:https://node-cors-client.netlify.com
该演示的代码可以在此处找到