CORS se abreje Cross-Origin Resource Sharing, ki se yon mekanis ki la ki pou endike ki orijin (diferan de orijin sous la) ke yon navigatè dwe kite aksede resous yo.

Ou gen yon API ki ap byen fonksyone. Kounya gen lòt aplikasyon ki vle kominike ak API sa.

Sa ki vin rive: Tout bagay bloke akoz pwoblèm CORS.

Kisa ki CORS la?

CORS se abreje Cross-Origin Resource Sharing, ki se yon mekanis ki la ki pou endike ki orijin (diferan de orijin sous la) ke yon navigatè dwe kite aksede resous yo.

• Si w gen yon [orijin 1]: http://sitmwen.com oubyen http://localhost:3000

• Yon lòt sit ki sou [orijin 2]: http://sitmwen2.com oubyen http://localhost:8000 pap ka aksede resous ki nan [orijin 1] an, si toutfwa [orijin 1] an pa dakò sa.

Ou ka gen yon erè konsa, ki endike ke gen yon blokaj:

XMLHttpRequest cannot load localhost:3000. No Access-Control-Allow-Origin header is present on the requested resource. Origin localhost:8000 is therefore not allowed access

Pwoteksyon sa posib gras ak CORS ki se yon mekanis ki baze sou antèt rekèt HTTP yo, ki se yon bon mezi sekirite ki ekziste nan navigatè yo.

Erè sa jis vle di tou, ke w dwe al aktive CORS nan sèvè NodeJS ou genyen😎

Aktive CORS

Si w deja gen yon API wèb ki ap fonksyone ak NodeJS + Express, li posib pou w konfwonte pwoblèm sa lè w gen yon lòt aplikasyon ki ap eseye konekte ak API ou a.

Se paske API ou a, pa dakò lòt aplikasyon aksede resous li yo.

Kòman nou ka fè yon API rekonèt yon orijin ?

Li senp pou w fè sa, wap jis bezwen ajoute yon antèt HTTP Access-Control-Allow-Origin nan repons ke w voye ale yo.

Sipoze w gen endpoint sa:

app.get("/private-posts", (request, response) => {
  return response.send([])
})

Kounya, gras ak metòd .set() la, wap ka ajoute antèt la ak sit ou otorize yo:

app.get("/private-posts", (request, response) => {
  response.set('Access-Control-Allow-Origin', '*')
  return response.send([])
})

Jan w ka remake, mwen mete *. Siy sa se pou m endike ke mwen aksepte tout kalite aplikasyon pou kominite ak API mwen an.

Si tout fwa, ou vle yon sit espesifik. Wap jis presize sit la

app.get("/private-posts", (request, response) => {
  response.set('Access-Control-Allow-Origin', 'localhost:8000')
  return response.send([])
})

Kounya, se sèlman sit ki baze sou localhost:8000 ki ap kapab aksede API a.

Globalize orijin nan.

Gade jan nou ajoute orijin sa pou yon endpoint. Li vin yon jan kòve si toutfwa nou vle ajoute l pou plis endpoint ankò.

Donk nou oblije fè l aplike pou tout endpoint yo.

Pou n fè sa, nap kreye yon fonksyon apa, ki pote non cors(). Se ladan, nou ap mete lojik pou CORS nou an:

const cors = (req, res, next) => {
  response.set('Access-Control-Allow-Origin', 'localhost:8000');
  next();
}

Nou fin kreye fonksyon an, ki pran 3 paramèt:

1. Rekèt la
2. Repons lan
3. Ak yon fonksyon ki jwe wòl aksyon swivan

Kounya pou n aplike fonksyon sa sou tout endpoint yo, nap jis itilize li avan tout definisyon endpoint yo gras ak metòd .use() la.

const app = express()

const cors = (req, res, next) => {
  response.set('Access-Control-Allow-Origin', 'localhost:8000');
  next();
}

app.use(cors)

// endpoints
...

app.listen(3000)

Oubyen nou ka mete fonksyon an dirèk

const app = express()

app.use((req, res, next) => {
  response.set('Access-Control-Allow-Origin', 'localhost:8000');
  next();
})

// endpoints
...

app.listen(3000)

Nan ekzanp kòd sa, nou di API a men ki sit(orijin) ki ka fè rekèt sou API a. Nou kapab di ki metòd HTTP nou aksepte tou gras ak Access-Control-Allow-Methods.

app.use((req, res, next) => {
  response.set('Access-Control-Allow-Origin', 'localhost:8000');
  response.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  next();
})

Se pratik pa vre?

Lè w ebèje sit ou a, olye de localhost:8000, se non domèn nan wap mete dirèk.

app.use((req, res, next) => {
  response.set('Access-Control-Allow-Origin', 'code9class.com');
  response.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  next();
})

Si w vle plis fonksyonalite sou CORS la, ou ka opte pou pakè npm cors la.