【折腾日记】如何让你的API不被其他人滥用

2026年8月2日|2 分钟阅读|-- 次阅读

本文将介绍如何使用CORS跨域限制使自己的API接口更安全！

目录+

前言

好久不见今天我们要介绍的是 —— CORS策略！简单来说，这种跨域限制能够指定哪些域名可以请求该API接口，而哪些请求不可以。同时，我也将结合我自己的真实开发过程进行介绍

主内容

什么是CORS策略

Note

本内容来源于 Mozilla 开发

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

也就是说，CORS提供了一种方案，这种方案能够让你识别到用户请求来源于什么站点，目标是什么站点，同时也能拦截非本站发起的请求，防止你的API被恶意刷量。

为什么要使用CORS

如上，CORS可以在一定程度上防止滥用，尽管Host和Origin可以被随意生成。如果您是电脑端用户，看到本站右侧TOC（目录树）下方的天气卡片了吗？这里就用到了CORS。试想：如果我不对相关API进行限制，我的天气接口是否会被其他人利用呢？所以为了有效降低可能造成的成本损失，我添加了相关的策略以及一些其他的防护验证机制（当然，本文只是讲CORS的，不涉及其他的验证机制）

怎么在Next.js上使用CORS策略

Note

本文来源于稀土掘金作者：前端为什么

直接在next.config.js中处理

在根目录的 next.config.js 中，你可以直接配置一个异步的headers()键，并携带所需的请求头：

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    async headers() {
        return [
            {
                // 在这里，你可以使用正则表达式添加你的来源 URL。
                source: "<your-source-url(s)>",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    // 在这里添加你的白名单来源
                    { key: "Access-Control-Allow-Origin", value: "<your-origin>" },
                    { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
                    { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
                ]
            }
        ]
    }
}

module.exports = nextConfig

创建中间件组件

如果你希望在请求打到源之前应用CORS，则需要一个中间件。在与 app 目录同级的目录下，创建middleware.js（或ts），并应用以下代码：

// src/middleware.ts 或 src/middleware.js

// https://blog.logrocket.com/using-cors-next-js-handle-cross-origin-requests/

import { NextResponse } from "next/server";

export function middleware() {
    // 检索当前响应
    const res = NextResponse.next()

    // 向响应中添加 CORS Headers
    res.headers.append('Access-Control-Allow-Credentials', "true")
    res.headers.append('Access-Control-Allow-Origin', '<your-origin>')
    res.headers.append('Access-Control-Allow-Methods', 'GET,DELETE,PATCH,POST,PUT')
    res.headers.append(
        'Access-Control-Allow-Headers',
        'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
    )

    return res
}

// 中间件只会应用于以下路由。
export const config = {
    matcher: '<your-source-url(s)>',
}

在本例中，只需配置 matcher 就可以指定源url

使用Vercel.json

如果您的应用程序在Vercel上运行，也可以使用根目录下的vercel.json

json

// 类似于 next.config.js 方法，但使用不同的路径正则表达式语法（参见 vercel.json 文档）。
// https://vercel.com/docs/projects/project-configuration#headers

{
  "headers": [
    {

      "source": "<your-source-url(s)>",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "<your-origin>" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,DELETE,PATCH,POST,PUT" },
        { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
      ]
    }
  ]
}

结语

本文只用作一个简单的分享，实际上在稀土掘金的原文中还有其他的内容，例如多端点配置CORS策略，不过本文不再多说

Note

本文转载自稀土掘金作者：前端为什么