如何在Node.js中启用CORS

在这篇文章中我们将学习如何在node.js中启用CORS。

CORS是一个浏览器的安全功能，它限制了与其他服务器的跨源HTTP请求，并指定哪些域访问你的资源。

比方说，从其他服务器访问图片、视频、iframe或脚本。这意味着网站从不同的来源或域访问资源。当用Express构建一个应用程序来提供这些资源时，对这种外部起源的请求可能会失败。这就是 CORS 处理跨源请求的地方。

先决条件。

要跟上这篇文章，之前对Node.js和Express的了解是必不可少的。

安装

这是一个通过npm注册表提供的Node.js模块。安装是通过npm install命令完成的。

$ npm install cors

现在让我们逐一看看 CORS 的用法。

1) 简单用法（启用所有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')
})

2) 为单个路由启用 CORS

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

3) 配置 CORS

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

你也可以使用CORS的配置选项来进一步定制。你可以使用配置来允许单个域或子域访问，根据你的要求配置允许的HTTP方法，如GET 和POST 。

如果我们发送一个来自POST 的请求 [http://localhost:8080](http://localhost:8080/)，它将被浏览器阻止，因为只有GET 和PUT 被支持。

fetch('http://localhost:2020', {
  method: 'POST',
  body: JSON.stringify({name: "ABCD"}),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

要查看配置选项的完整列表，请参考官方文档。

默认的配置是相当于

{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}

结语

在这篇文章中，我们已经了解了如何在 node.js 中启用 CORS。我们也看到了如何以简单的方式配置它们。当我们想启用它们时，有几个配置选项可用。