Express: 启用 cors

我的自建博客上的文章原地址：Express: 启用 cors

什么是 CORS

CORS ([Cross-Origin Resource Sharing]{.i}) 是一种跨域资源共享的机制。所谓跨域请求是指向不同域名的服务器的请求。

跨域请求非常常见，例如一般的网站都会使用单独的静态文件服务器提供如图片、CSS 样式以及 JavaScript 脚本等静态文件资源，访问这些资源的请求一般都是跨域的。

不过处于安全性的考虑，现代浏览器都会对由前端脚本发起的跨域请求进行限制。CORS 机制是允许 Web 应用脚本进行跨域访问的一种机制。现代浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。

关于 CORS 的具体讲解可以参考阮一峰的博文：跨域资源共享 CORS 详解。

在 Express 上启用 CORS

注意，在生产环节中如果有前置的反向代理，如 Nginx 的存在，那么 CORS 的相关配置需要放置在 Nginx 上。如果需要对 CORS 进行非常详细的配置，可以放在后面的 Express 上。不过在 Nginx 上的 CORS 实现的效率会更高。

Express 上的 CORS 通过使用 cors 这个中间件来实现。

首先安装 cors

$ npm install cors

使用方法如下：

全局简单配置

为所有的请求启用 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')
})

配置 CORS

下面是一个例子，配置了 CORS 只对特定的 Origin 有效

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')
})

更详细的配置方法参见 cors 的文档。