CORS алдаа гэж юу вэ? Яагаад гардаг, хэрхэн засах вэ

Console дээр улаанаар гарч ирдэг тэр аймшигтай CORS алдаа. Үнэндээ энэ бол алдаа биш, харин хөтчийн хамгаалалт юм. Учрыг нь тайлбарлав.

Frontend-ээс API руу хүсэлт явуулахад “Access to fetch has been blocked by CORS policy” гэсэн бичиг гарч ирвэл бүү сандар. Энэ бол таны кодын алдаа биш, харин хөтчийн аюулгүй байдлын дүрэм ажиллаж байгаагийн шинж.

CORS яагаад байдаг вэ?

Хөтөч нь нэг домэйн дээрх сайт өөр домэйний нөөц рүү зөвшөөрөлгүй хандахаас хамгаалдаг. Жишээ нь таны банкны site нээлттэй байхад ямар нэг хортой хуудас чимээгүйхэн мөнгө шилжүүлэх хүсэлт явуулбал ямар байх вэ? CORS үүнээс сэргийлдэг.

Хэрхэн зөв засах вэ

Шийдэл нь frontend талд биш, server талд байдаг. Express ашиглаж байвал cors багцыг суулгаад зөвшөөрөгдсөн домэйнүүдээ тодорхойлж өгнө.

server.js

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors({
  origin: 'https://zucoding.com',
  methods: ['GET', 'POST'],
}))

app.listen(3000)

CORS-ийг frontend-ээс биш, server-ээс тохируулна.
origin: "*" зөвхөн туршилтад — production-д яг домэйноо бич.
Хэрэглэгчийн нэвтрэлт (cookie) байвал credentials: true шаардлагатай.

Ингэснээр console дахь улаан бичиг алга болж, хүсэлт амжилттай дамжина. CORS бол дайсан биш, найз чинь гэдгийг санаарай.