被 CORS 氣到想砸電腦?我用這一招,本地開發(fā)一鍵解套
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-middleware2)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ā)出,而不是從瀏覽器硬跨域,問題就輕松化解。 這招,曾替我在上線前省下好幾天的來回扯皮。 希望也能幫到此刻的你。


























