Hagaha

Sida loo hagaajiyo khaladaadka CORS (iyo sababta ay u dhacaan)

Khalad CORS macnaheedu waa bogga web-kaagu wuxuu isku dayay inuu akhriyo jawaab ka timid origin kale (domain, port ama protocol kale), server-kaasna ma uusan soo dirin headers sheegaya in ay oggolaan tahay. Browser-yadu jawaabta way xannibaan si ay isticmaaleyaasha u ilaaliyaan. Waxaad hagaajisaa server-ka, adigoo soo celinaya header Access-Control-Allow-Origin origin-ka site-kaaga iyo adigoo maamulaya codsiyada preflight ee OPTIONS, ama waad ka fogaatay adigoo codsiga ku diraya backend-kaaga oo ku jira origin isku mid ah.

Waa mid ka mid ah khaladaadka ugu jahawareeriya horumarinta web-ka sababtoo ah codsiga badanaa server-ka si fiican ayuu u gaaraa. Hagahan wuxuu sharaxayaa waxa dhacaya iyo sida mid kasta loo hagaajiyo.

Micnaha "origin"

Origin waa isku-darka protocol-ka, domain-ka iyo port-ka:

URLOrigin
https://myapp.com/dashboardhttps://myapp.com
https://api.myapp.com/usershttps://api.myapp.com (subdomain kale, sidaas darteed origin kale)
http://localhost:5173http://localhost:5173
http://localhost:3000http://localhost:3000 (port kale, sidaas darteed origin kale)

Browser-yadu waxay raacaan same-origin policy: JavaScript-ka bog ayaa si xor ah uga akhrin kara jawaabaha origin-kiisa, laakiin ma uu akhrin karo kuwa kale. CORS (Cross-Origin Resource Sharing) waa nidaamka server-ku ku ogolaado: “jawaabahayga bogagga ka yimid origins-kan waa ay akhriyi karaan.”

Labo natiijo oo dadka yaabiya:

  • Codsigu badanaa server-ka wuu gaaraa. CORS badanaa waxay xannibaa code-kaaga inuu akhriyo jawaabta, ma aha server-ka inuu helo codsiga. POST waa laga yaabaa in la kaydiyay in kastoo aad qalad aragtay.
  • Browser-yada kaliya ayaa fuliya. curl, Postman iyo code-ka server-ka dhinaca ayaa gebi ahaanba iska indha tiraya CORS. Sidaas darteed “waxay ku shaqeysaa Postman-ka” ma sheegayo waxba oo ku saabsan CORS.

Tallaabo 1: Akhri qaladka saxda ah

Fur developer tools (midig-riix → Inspect), u gudub Console, oo akhri fariinta oo dhan. Qoraalka Chrome wuxuu kuu sheegayaa dhibaatada aad leedahay:

Fariintu waxay ka kooban tahayWaxa khaldan
No 'Access-Control-Allow-Origin' header is presentServer-ku uma uu soo dirin header-ka gebi ahaanba, ama codsigu wuxuu fashilmay ka hor inta uusan gaarin code-ka CORS-ka (tusaale ahaan 404 ama 500)
The 'Access-Control-Allow-Origin' header has a value '...' that is not equal to the supplied originServer-ku wuxuu oggolaanayaa origin kale oo aan kaaga ahayn
Response to preflight request doesn't pass access control checkPreflight-ka OPTIONS wuu fashilmay
...must not be the wildcard '*' when the request's credentials mode is 'include'Cookies ayaad dirayaa, server-kuna wuxuu kuu soo celiyay *
Request header field authorization is not allowedServer-ku ma uu liistaynin header-kaas Access-Control-Allow-Headers gudahiisa

Kadibna fur tab-ka Network, raadi codsiga fashilmay (iyo OPTIONS kasta oo ka horreeya), oo fiiri status code-kiisa iyo response headers-kiisa.

Marka hore hubi status code-ka. Khaladaadka CORS ee badan waa khalad server oo qaab kale ku jira. Haddii server-ku burburo ama uu soo celiyo 404, jawaabtiisa qalad badanaa ma leh CORS headers, sidaas darteed browser-ku wuxuu sheegaa CORS halkii dhibaatada dhabta ahayd. Hagaaji 500 ama 404, khaladka CORS ayaa laga yaabaa inuu baabbi'o.

Tallaabo 2: Go'aami haddii browser-ka ka wicitaankaan API-gaas toos

Kahor intaadan headers ku darin, weydii: browser-ku ma waa inuu toos u wicitaanaa API-gan?

  • API-ga dhinac saddexaad ah ee u baahan furaha qarsoon (OpenAI, Stripe secret key, inta badan adeegyada email) waligood looma wicitaano browser-ka. Furaha waxaa arki doona booqde kasta. Ka wicitaan backend-kaaga, khaladka CORS wuu baabbi'aa, sababtoo ah codsiyada server-ka ilaa server-ka ma ku xirna CORS. Eeg sida loo ilaaliyo furayaasha API.
  • API-ga dhinac saddexaad ah aadan maamulin oo aan CORS headers u dirin lama hagaajin karo dhinacaaga. Ka wicitaan backend-kaaga.
  • API-gaaga waa la hagaajin karaa adigoo si sax ah u habeynaya. Sii wad hoos.

Tallaabo 3: Hagaaji server-kaaga

Server-ku waa inuu ku daraa headers-ka saxda jawaabihiisa oo dhan, ay ku jiraan jawaabaha khaladka.

Codsiga dhabta ah, dir:

  • Access-Control-Allow-Origin: https://myapp.com (origin-ka frontend-kaaga oo sax ah, slash ku dambeeya la'aan)
  • Vary: Origin, haddii qiimaha ku xirnaan doono origin-ka weydiiyey

Codsiga preflight ee OPTIONS, ka jawaab status guul ah (200 ama 204) oo leh:

  • Access-Control-Allow-Origin: https://myapp.com
  • Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE
  • Access-Control-Allow-Headers: Content-Type, Authorization (header kasta oo custom ah oo aad dirto)
  • Ikhtiyaari ah Access-Control-Max-Age: 600, si browser-ku preflight-ka u kaydiyo muddo

Framework-yada intooda badan waxay leeyihiin package ama dejin samaysa tan. Express-ka, package-ka cors; FastAPI-ga, CORSMiddleware; ASP.NET Core-ka, AddCors; Spring-ka, @CrossOrigin ama habaynta CORS. Dejin Express oo caadi ah:

import cors from "cors";

app.use(cors({
  origin: ["https://myapp.com", "http://localhost:5173"],
  credentials: true,
}));

Dhig maamulka CORS ka hor routes-kaaga iyo authentication-ka, si codsiyada preflight (oo aan login lahayn) aan loo diidin 401.

AI builder-ka, sharax dejinta si sax ah:

Frontend-ka https://myapp.com wuxuu wicitaanayaa API-ga https://api.myapp.com wuxuuna helayaa "Response to preflight request doesn't pass access control check". Dejiso CORS API-ga si uu u oggolaado kaliya https://myapp.com iyo preview origin-ka, oggolow GET, POST, PATCH, DELETE oo leh headers-ka Content-Type iyo Authorization, maamul OPTIONS ka hor auth, oo ku dar CORS headers jawaabaha khaladka sidoo kale.

Tallaabo 4: Maamul cookies iyo credentials

Haddii frontend-kaagu cookies (tusaale ahaan, session login) u diro origin kale, labada dhinac waa inay heshiiyaan:

  • Frontend-ku dejiyo credentials: "include" fetch-ka, ama withCredentials: true axios-ka.
  • Server-ku wuxuu diraa Access-Control-Allow-Credentials: true.
  • Access-Control-Allow-Origin ee server-ka waa inuu noqdaa origin-ka saxda ah, ma aha *.

Cookies-ka cross-site waxay sidoo kale u baahan yihiin SameSite=None; Secure cookie-ga, browser-yada qaarkood waxay sii xaddidaan cookies-ka dhinac saddexaad. Taasi waa sabab kale oo aad uga doorbidi lahayd habka Tallaabo 5.

Tallaabo 5: Ka fogaad CORS adigoo habeynayo same-origin

Inta badan xalka ugu nadiifka ahi waa in aan codsiyo cross-origin ah samayn. U adeeg API-ga isla origin-ka bogga, tusaale ahaan https://myapp.com/api/...:

  • Horumarinta, server-yada horumarinta badankood way proxy-gareyn karaan. Dejinta server.proxy ee Vite waxay /api u diri kartaa backend-kaaga port kale, sidaas darteed browser-ku mar walba wuxuu la hadlaa hal origin.
  • Production-ka, /api u wareeji backend-ka adigoo isticmaalaya host-kaaga rewrite ama proxy settings, ama u adeeg frontend-ka iyo API-ga server hal ah.

Kadibna frontend-ku wuxuu wicitaanayaa jid relative ah sida fetch("/api/orders"). Ma jiro codsi cross-origin ah, ma jiro preflight cross-origin ah, mana jiro cookie-yo dhib leh. Waxay kaloo ka dhigaysaa inaadan hardcode-gareyn domain API ah oo ka duwan preview iyo production.

Ka beddel frontend-ka inuu wicitaano backend-ka adigoo isticmaalaya jidadka relative ah ee /api halkii URL oo dhan, oo dejiso dev proxy si /api u gudbiyo server-ka API-ga. Kadibna ka saar dejinnada CORS ee aan u baahnayn mar dambe.

Waxa aan la samayn

  • mode: "no-cors" fetch-ka. Waxba ma dhaafayso; wuxuu code-kaaga siinayaa jawaab madhan oo aan la akhriyi karin.
  • Browser extensions-ka kuwaas oo damiya CORS. Waxay kaliya beddelaan browser-kaaga. Booqdayaasha oo dhan weli khaladka way arkaan.
  • Adeegyada dadweynaha ah ee “CORS proxy” apps dhab ah. Waxay akhriyi karaan oo beddeli karaan wax kasta oo mara, waxayna hoos u dhacaan.
  • Access-Control-Allow-Origin: * API-ga leh login. Credentials-ka ma shaqeeyo, waana default khaldan xogta gaarka ah.
  • Dib u celinta Origin header kasta oo credentials la oggol yahay. Taasi waxay oggolaanaysaa website kasta inuu codsiyo oo login ah u sameeyo magaca isticmaaleyaashaada. Isticmaal allowlist.

Sababaha caadiga ah ee apps-ka AI lagu dhisay

XaaladXalka
Frontend-ku wuxuu wicitaanayaa API dhinac saddexaad ah furaha qarsoon ahU wareeji wicitaanka backend-ka
Preview-ka way shaqeysaa, domain-ka la daabacay wuu fashilmaaKu dar origins-ka la daabacay iyo custom domain-ka allowlist-ka, ama isticmaal jidadka relative /api
Khalad kaliya POST, PUT ama DELETEPreflight lama maamulin; ku dar maamulka OPTIONS iyo headers-ka la oggol yahay
Khaladku wuxuu soo baxay kadib markii login la darayCredentials waxay u baahan yihiin origin sax ah iyo Allow-Credentials
"CORS error" laakiin Network tab-ku wuxuu muujinayaa 500Marka hore hagaaji khaladka server-ka
URL-ka API ayaa lagu hardcode-gareeyay localhostIsticmaal jidadka relative ama dejin gaar ah deegaan kasta

CORS Mythex

Marka mashruuca Mythex uu leeyahay website iyo server API, labaduba waxay ku socdaan adeegyo mashruuc isku mid ah, waxaadna ku beddeli kartaa preview-ka. Waxaad weydiisaa agent-ka inuu frontend-ku wicitaano backend-ka jid relative /api ah, oo development-ka lagu proxy-gareeyo, taasi waxay ka fogaynaysaa inta badan dhibaatooyinka CORS. Haddii aad dhab ahaan u baahan tahay wicitaanno cross-origin ah, siiso agent-ka qaladka saxda ah ee console-ka iyo origins-ka ku lug leh. Hubi natiijada app-ka la daabacay sidoo kale, sababtoo ah cinwaankiisu wuu ka duwan yahay preview-ka. Eeg Multi-service apps iyo API backends docs-ka, iyo hagahayaga debugging app AI lagu dhisay iyo frontend vs backend.

Liiska CORS

  • Akhri qaladka oo dhan ee console-ka iyo status code-ka codsiga fashilmay
  • Hubi in 404 ama 500 qarsoon aanu jirin
  • APIs-ka furayaasha qarsoon ah waxaa laga wicitaanayaa backend-ka, ma aha browser-ka
  • Server-ku wuxuu diraa Access-Control-Allow-Origin oo leh origins-ka saxda ah ee la oggol yahay
  • Preflight-ka OPTIONS waa la jawaabay methods iyo headers la oggol yahay, ka hor auth
  • CORS headers waa ku jiraan jawaabaha khaladka sidoo kale
  • Credentials: origin sax ah, Allow-Credentials: true, dejinta cookie-ga oo saxan
  • Origins-ka preview, la daabacay iyo custom domain oo dhan waa la daboolay, ama jidadka relative /api ayaa la isticmaalay
  • Ma jiro no-cors, public proxies, ama gaabinta reflect-any-origin

Su'aalaha

Waa maxay macnaha khaladka CORS?

Bogga aad, oo laga soo raray hal origin, wuxuu isku dayay inuu akhriyo jawaab ka timid origin kale, server-kaas jawaabtiisa ma uusan lahayn headers oggolaanaya. Browser-ku wuxuu xannibaa code-kaaga inuu akhriyo jawaabta. Xalku wuxuu ku jiraa server-ka ama habka codsiga loo waddo, ma aha code-ka frontend-ka.

Ma hagaajin karaa khalad CORS frontend-ka?

Si sax ah ma aha. Dejinno sida mode: 'no-cors' waxay kaliya qariyaan jawaabta code-kaaga. Waxaad hagaajisaa server-ka oo u diraya Access-Control-Allow-Origin header sax ah, ama aad API-ga ka wicitaanto backend-kaaga ama proxy same-origin ah.

Access-Control-Allow-Origin: * ma nabad baa?

Waa fiican tahay xogta dadweynaha ah oo qof kasta akhriyi karo, sida API dadweyne oo aan login lahayn. Cookies ama credentials kale lama isticmaali karo, APIs-ka gaarka ahna waa inaad liistaysaa origins-ka saxda ah ee la oggol yahay.

Maxaad uga shaqeysaa Postman ama curl laakiin browser-ka ma shaqeyso?

CORS waxaa fuliya browser-yada oo keliya. Qalabyada sida Postman iyo curl ma adeegsadaan, sidaas darteed codsi ayaa halkaas ku guuleysan karaa oo weli la xannibi karaa markii JavaScript-ka bogga uu sameeyo.

Waa maxay codsiga preflight?

Codsiyada aan fudayn, sida JSON POST ama mid leh header-ka Authorization, browser-ku marka hore wuxuu diraa codsi OPTIONS ah isagoo weydiinaya server-ka waxa methods iyo headers ah ee la oggol yahay. Haddii codsigaas OPTIONS uu fashilmo ama uu ka maqan yahay headers-ka saxda ah, codsiga dhabta ah waligiis lama diro.

Mythex · Pricing · Wax kasta ku dhis AI · Templates-ka website-ka iyo app-ka · Mythex marka la barbar dhigo · Qaamuuska dhismaha app-ka AI · Qalabka bilaashka ah ee dhismaha app-ka AI · English

English አማርኛ العربية Български বাংলা Bosanski Català Čeština Dansk Deutsch Ελληνικά Español Español (España) Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Hrvatski Magyar Հայերեն Bahasa Indonesia Íslenska Italiano 日本語 ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी Bahasa Melayu မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Shqip Srpski Svenska Kiswahili தமிழ் తెలుగు ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文（香港） 繁體中文（台灣）