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 的文檔。