1 什么是 CORS

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

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

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

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

2 在 Express 上启用 CORS

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

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

首先安装 cors

1
$ npm install cors

使用方法如下：

2.1 全局简单配置

为所有的请求启用 CORS

1
2
3
4
5
6
7
8
9
10
11
12
13
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')
})

2.2 为某个单独的请求启用

1
2
3
4
5
6
7
8
9
10
11
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')
})

2.3 配置 CORS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 的文档。