درک CORS و خطای CORSNotSupportingCredentials

guides errors corsnotsupportingcredentials
20 آبان 1403

هر وقت که با یک اپلیکیشن تحت وب کار می‌کنیم، خیلی مواقع نیازه که داده‌ها رو از یک منبع دیگه فراخوانی کنیم. به خاطر امنیت کاربران و سرورها، مرورگرها پروتکل ارتباطی به نام CORS رو پیاده‌سازی می‌کنن. CORS یا Cross-Origin Resource Sharing یه سازوکاریه که به مرورگرها اجازه‌ی مبادله‌ی منابع بین دامین‌ها یا مبداهای مختلف رو می‌ده. اما همین CORS می‌تونه بعضی وقتا دردسرساز بشه و منجر به خطاهایی مثل «CORSNotSupportingCredentials» بشه.

خیلی وقتا وقتی ما با API ها کار می‌کنیم، نیاز داریم که به سرور بگیم که چه کوکی‌هایی ارسال بشه یا چجوری اعتبارسنجی انجام بده. وقتی CORS فعال می‌شه، حالت پیش‌فرضش اینه که درخواست‌ها بدون کوکی ارسال بشن. این یعنی کوکی‌ها یا اطلاعات هویتی‌مون از درخواست‌ها حذف می‌شن که می‌تونه به خطای CORS منجر شه.

حالا این خطای «CORSNotSupportingCredentials» وقتی ایجاد می‌شه که سرور ما توانایی یا علاقه‌ای به پذیرش درخواست‌هایی که با کوکی یا اطلاعات اضافی همراه هستند، نداره. یعنی سرور داریم که به مرورگر می‌گه "نه، من داده‌های اضافی رو نمی‌پذیرم" و مرورگر هم مانع از این می‌شه که درخواست کامل انجام شه.

یه راه‌حل برای رفع این مشکل تنظیم صحیح هدرهای CORS توی سرور هست. سرور ما باید هدر Access-Control-Allow-Credentials رو برابر با true تنظیم کنه و همچنین دامنه مبدا خاصی رو توی هدر Access-Control-Allow-Origin مشخص کنه، مثلاً https://example.com. اینطوری فقط درخواست‌هایی از این دامنه با اطلاعات هویتی پذیرفته می‌شن.

حالا بذار یه مثال واقعی از تنظیم این هدرها رو بزنیم:


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

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://example.com');
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
});

app.get('/data', (req, res) => {
    res.json({ message: 'Hello from server with CORS headers!' });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

این کد بالا یه سرور Node.js ساده با استفاده از Express رو نشون می‌ده. اول هدر Access-Control-Allow-Origin رو مقدار می‌دیم به آدرسی خاص، مثلاً https://example.com. این یعنی فقط درخواست‌هایی از این دامنه پذیرفته می‌شن.
بعد هدر Access-Control-Allow-Credentials رو روی true تنظیم می‌کنیم که یعنی درخواست‌هایی که با کوکی یا اطلاعات هویتی می‌گیرن رو می‌پذیریم.
در نهایت یه روت تعریف می‌کنیم که یه پیغام ساده برمی‌گردونه تا به ما نشون بده که سرور داریم با موفقیت اجرا می‌شه.

سوالات متداول

؟

چطور مشکل CORS رو حل کنم؟

؟

آیا می‌تونم برای همه سایت‌ها CORS رو فعال کنم؟

؟

هدر Access-Control-Allow-Credentials چه کاری انجام می‌ده؟