CORS 報(bào)錯(cuò)

你在做一個(gè) React 或 Next.js 的前端。 你準(zhǔn)備從某個(gè) 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 報(bào)錯(cuò)直擊靈魂。 如果你經(jīng)歷過(guò)，你就懂那種無(wú)力感。

?? 這玩意兒為啥老來(lái)找茬？

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

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

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

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

操作就三步：

1）安裝 http-proxy-middleware

npm install http-proxy-middleware

2）Create React App 項(xiàng)目里，新建/編輯 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 的寫(xiě)法在 Next.js 里，創(chuàng)建 next.config.js：

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

此后你依然請(qǐng)求 /api/...，但 Next.js 會(huì)在服務(wù)端把請(qǐng)求代理到真實(shí)地址。于是，不需要?jiǎng)雍蠖?/span>，CORS 也不再作妖。

?? 為啥它就靈了？因?yàn)檎?qǐng)求不是由瀏覽器跨域發(fā)出，而是由（本地）服務(wù)端/開(kāi)發(fā)服務(wù)器代勞：

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

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

聽(tīng)起來(lái)“像開(kāi)了掛”，但這真的合法合規(guī)。

?? 我常用的工具清單

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

最后

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