被 CORS 气到想砸电脑？我用这一招，本地开发一键解套

最新推荐文章于 2025-11-30 18:24:05 发布

原创最新推荐文章于 2025-11-30 18:24:05 发布 · 870 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#java #后端 #开发语言

刚接触 API 的同学，遇到 CORS 往往会被绕进一个黑洞。然而，只要你换个路径：让请求经由代理从服务端发出，而不是从浏览器硬跨域，问题就轻松化解。这招，曾替我在上线前省下好几天的来回扯皮。希望也能帮到此刻的你。

CORS 报错

你在做一个 React 或 Next.js 的前端。你准备从某个 API 拉数据。你手一抖，fetch 发出去，然后——

Access to fetch at 'https://api.example.com/data'
from origin 'http://localhost:3000' has been blocked
by CORS policy.

砰！CORS 报错直击灵魂。如果你经历过，你就懂那种无力感。

⚠️ 这玩意儿为啥老来找茬？

CORS（跨域资源共享）是浏览器内置的安全机制：它会阻止localhost:3000 的前端代码，直接去请求另一个来源（比如 api.example.com），除非对方服务端明确放行相应的 CORS 头。

然而，当你不掌控后端时，你就被动了。至少，我曾经以为我被卡死了。

救我于水火的偏方：本地代理

与其苦苦央求后端改 CORS，不如在本地起一个代理，把前端请求“伪装”成同源再转发出去。因此，浏览器不拦你，你也不再被吊打。

操作就三步：

1）安装 http-proxy-middleware

npm install http-proxy-middleware

2）Create React App 项目里，新建/编辑 `src/setupProxy.js`：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://api.example.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '', // 转发前去掉 /api 前缀
      },
    })
  );
};

3）前端代码里改成这样：

fetch('/api/data') // 不再直打 https://api.example.com/data

搞定CORS 直接消失。

⚙️ 加餐：Next.js 的写法在 Next.js 里，创建 next.config.js：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*',
      },
    ];
  },
};

此后你依然请求 /api/...，但 Next.js 会在服务端把请求代理到真实地址。于是，不需要动后端，CORS 也不再作妖。

🤯 为啥它就灵了？因为请求不是由浏览器跨域发出，而是由（本地）服务端/开发服务器代劳：

代理替你“出面”，再把结果转交给前端。

浏览器的 CORS 策略因此不被触发。

听起来“像开了挂”，但这真的合法合规。

🛠 我常用的工具清单