CORS 報錯

你在做一個 React 或 Next.js 的前端。 你準備從某個 API 拉數(shù)據(jù)。 你手一抖，fetch 發(fā)出去，然后——

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

砰！CORS 報錯直擊靈魂。 如果你經(jīng)歷過，你就懂那種無力感。

?? 這玩意兒為啥老來找茬？

CORS（跨域資源共享）是瀏覽器內(nèi)置的安全機制：它會阻止localhost:3000 的前端代碼，直接去請求另一個來源（比如 api.example.com），除非對方服務端明確放行相應的 CORS 頭。

然而，當你不掌控后端時，你就被動了。 至少，我曾經(jīng)以為我被卡死了。

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

與其苦苦央求后端改 CORS，不如在本地起一個代理，把前端請求“偽裝”成同源再轉(zhuǎn)發(fā)出去。因此，瀏覽器不攔你，你也不再被吊打。

操作就三步：

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': '', // 轉(zhuǎn)發(fā)前去掉 /api 前綴
      },
    })
  );
};

3）前端代碼里改成這樣：

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

搞定CORS 直接消失。

?? 加餐：Next.js 的寫法在 Next.js 里，創(chuàng)建 next.config.js：

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

此后你依然請求 /api/...，但 Next.js 會在服務端把請求代理到真實地址。于是，不需要動后端，CORS 也不再作妖。

?? 為啥它就靈了？因為請求不是由瀏覽器跨域發(fā)出，而是由（本地）服務端/開發(fā)服務器代勞：

代理替你“出面”，再把結(jié)果轉(zhuǎn)交給前端。

瀏覽器的 CORS 策略因此不被觸發(fā)。

聽起來“像開了掛”，但這真的合法合規(guī)。

?? 我常用的工具清單

• http-proxy-middleware（CRA 場景穩(wěn)）
• Next.js rewrites（服務端轉(zhuǎn)發(fā)更優(yōu)雅）
• cors-anywhere（臨時測試、權(quán)衡使用）

最后

剛接觸 API 的同學，遇到 CORS 往往會被繞進一個黑洞。 然而，只要你換個路徑：讓請求經(jīng)由代理從服務端發(fā)出，而不是從瀏覽器硬跨域，問題就輕松化解。 這招，曾替我在上線前省下好幾天的來回扯皮。 希望也能幫到此刻的你。