Node.js 中 cors 依赖详解

`cors` 是一个用于处理跨域资源共享(Cross - Origin Resource Sharing,CORS)问题的 Node.js 中间件,在前后端分离开发的项目中经常会用到。

一、跨域问题概述

在浏览器中,出于安全考虑,遵循同源策略,即浏览器只允许访问同源(协议、域名、端口都相同)的资源。当浏览器向不同源的服务器发起请求时,就会受到浏览器的跨域限制,导致请求被阻止。CORS 是一种现代的跨域解决方案,允许服务器在响应头中设置一些字段,告诉浏览器该请求是被允许的。

1. 安装 `cors`

bash 复制代码
# 使用 npm 安装

npm install cors

2. 基本使用

将 `cors` 中间件应用到整个 Express 应用,这意味着所有路由都允许跨域请求。当客户端(如浏览器)发起对 `/data` 路由的请求时,服务器会在响应头中添加必要的 CORS 相关字段,从而允许跨域访问。

javascript 复制代码
const express = require("express");

const cors = require("cors");

const app = express();

// 使用 cors 中间件

app.use(cors());

app.get("/data", (req, res) => {

  res.json({ message: "This is some data from the server" });

});

const port = 3000;

app.listen(port, () => {

  console.log(`Server running on port ${port}`);

});

二、配置选项

`cors` 中间件提供了多种配置选项,以满足不同的跨域需求。

1. `origin`

用于指定允许跨域请求的源(origin)。可以是一个字符串、一个数组,或者是一个函数。

javascript 复制代码
// 允许单个源

const corsOptions = {

  origin: "http://example.com",

};

app.use(cors(corsOptions));

// 允许多个源

const corsOptionsMultiple = {

  origin: ["http://example1.com", "http://example2.com"],

};

app.use(cors(corsOptionsMultiple));

// 使用函数动态配置 origin

const corsOptionsFunction = {

  origin: (origin, callback) => {

    const allowedOrigins = ["http://example.com", "http://test.com"];

    if (!origin || allowedOrigins.includes(origin)) {

      callback(null, true);

    } else {

      callback(new Error("Not allowed by CORS"));

    }

  },

};

app.use(cors(corsOptionsFunction));

2. `methods`

用于指定允许的 HTTP 请求方法,默认值为 `'GET,HEAD,PUT,PATCH,POST,DELETE'`。

javascript 复制代码
const corsOptionsMethods = {

  methods: "GET,POST",

};

app.use(cors(corsOptionsMethods));

3. `allowedHeaders`

用于指定允许的请求头,默认情况下,浏览器会自动处理一些常见的请求头。如果需要自定义请求头,可以使用该选项。

javascript 复制代码
const corsOptionsHeaders = {

  allowedHeaders: "Content-Type,Authorization",

};

app.use(cors(corsOptionsHeaders));

4. `exposedHeaders`

用于指定允许客户端访问的响应头。默认情况下,浏览器只能访问一些简单的响应头,通过该选项可以暴露更多的响应头给客户端。

javascript 复制代码
const corsOptionsExposed = {

  exposedHeaders: "X-Custom-Header",

};

app.use(cors(corsOptionsExposed));

5. `credentials`

一个布尔值,指示是否允许客户端在跨域请求中携带凭证(如 cookies、HTTP 认证等)。默认值为 `false`。

javascript 复制代码
const corsOptionsCredentials = {

  credentials: true,

};

app.use(cors(corsOptionsCredentials));

6. 针对特定路由使用 `cors`

除了将 `cors` 应用到整个应用,还可以针对特定的路由使用 `cors` 中间件。

javascript 复制代码
const express = require("express");

const cors = require("cors");

const app = express();

const corsOptions = {

  origin: "http://example.com",

};

// 只允许特定路由跨域

app.get("/data", cors(corsOptions), (req, res) => {

  res.json({ message: "This is some data from the server" });

});

const port = 3000;

app.listen(port, () => {

  console.log(`Server running on port ${port}`);

});
相关推荐
神仙别闹3 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
BXCQ_xuan5 小时前
基于Node.js的健身会员管理系统的后端开发实践
后端·mysql·node.js
wt_cs5 小时前
身份证实名认证接口数字时代的信任基石-node.js实名认证集成
开发语言·node.js·php
李剑一7 小时前
写一个vitepress新建文章脚本,自动化创建链接,别再手写了!
前端·node.js·vitepress
名字越长技术越强1 天前
Node.js学习
学习·node.js
知识分享小能手1 天前
JavaScript学习教程,从入门到精通,Ajax与Node.js Web服务器开发全面指南(24)
开发语言·前端·javascript·学习·ajax·node.js·html5
dwqqw1 天前
opencv图像库编程
前端·webpack·node.js
layman05281 天前
node.js 实战——(fs模块 知识点学习)
javascript·node.js
本本啊1 天前
node 启动本地应用程序并设置窗口大小和屏幕显示位置
前端·node.js
全栈派森1 天前
Next15 + Prisma + Auth5 实战讲解
react.js·node.js·next.js