از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
مدیریت CORS با Node.js در این مقاله، ما قصد داریم نگاهی به CORS بیاندازیم، چگونه می‌توانید CORS را با Express پیکربندی کنید، و چگونه میان‌افزار CORS را بر اساس نیازهای خود سفارشی کنید. آنچه CORS CORS است مخفف اشتراک‌گذاری منابع متقاطع است. این مکانیزمی است برای اجازه یا محدود کردن درخواست‌ها…
سرفصلهای مطلب
معرفی
در این مقاله، ما قصد داریم نگاهی به CORS بیاندازیم، چگونه می‌توانید CORS را با Express پیکربندی کنید و چگونه میان‌افزار CORS را مطابق با نیازهای خود سفارشی کنید.
CORS چیست
CORS مختصر است برای اشتراک منابع متقابل. مکانیزمی است برای اجازه یا محدود کردن منابع درخواستی روی یک وب سرور بسته به روی جایی که درخواست HTTP آغاز شد.
این خط مشی برای ایمن کردن یک وب سرور خاص از دسترسی سایر وب سایت ها یا دامنه ها استفاده می شود. به عنوان مثال، فقط دامنه های مجاز می توانند به فایل های میزبانی شده در یک سرور مانند شیوه نامه، تصویر یا اسکریپت دسترسی داشته باشند.
اگر در حال حاضر هستید روی http://example.com/page1 و شما به تصویری از آن اشاره می کنید http://image.com/myimage.jpg شما نمی توانید آن تصویر را واکشی کنید مگر اینکه http://image.com به اشتراک گذاری با مبدا متقابل اجازه می دهد http://example.com.
یک هدر HTTP به نام وجود دارد origin در هر درخواست HTTP مشخص می کند که درخواست دامنه از کجا نشات گرفته است. ما می توانیم از اطلاعات هدر برای محدود کردن یا اجازه دادن به منابع سرور وب خود برای محافظت از آنها استفاده کنیم.
به‌طور پیش‌فرض، درخواست‌های هر منبع دیگری توسط مرورگر محدود می‌شوند.
به عنوان مثال، در حالی که هنوز در مرحله توسعه هستید – اگر از یک کتابخانه frontend مانند React استفاده می کنید، برنامه front end شما ارائه می شود. روی http://localhost:3000. در همین حال، سرور Express شما ممکن است در حال اجرا باشد روی یک پورت متفاوت مانند http://localhost:2020.
به همین دلیل، باید CORS را بین آن سرورها مجاز کنید.
اگر این خطای رایج را در مرورگر خود مشاهده کردید console. محدودیت های CORS می تواند مشکل باشد:
CORS زمانی که شما یک API عمومی ارائه می دهید و می خواهید دسترسی به منابع خاصی و روش استفاده افراد از آنها را کنترل کنید، واقعا مفید است.
همچنین، اگر می خواهید از API یا فایل های خود استفاده کنید روی یک وب متفاوت page شما به سادگی می توانید CORS را طوری پیکربندی کنید که اجازه دهد، در حالی که دیگران را مسدود کنید.
پیکربندی CORS با Express
بیایید با یک پروژه جدید شروع کنیم. یک دایرکتوری برای آن می سازیم، آن را وارد کرده و اجرا می کنیم npm init با تنظیمات پیش فرض:
$ mkdir myapp
$ cd myapp
$ npm init -y
سپس ماژول های مورد نیاز را نصب می کنیم. استفاده خواهیم کرد express و cors میان افزار:
$ npm i --save express
$ npm i --save cors
سپس اجازه دهید شروع به ایجاد یک برنامه وب اکسپرس با دو مسیر کنیم تا نشان دهیم CORS چگونه کار می کند.
ما یک فایل با نام index.js که به عنوان یک وب سرور با چند کنترل کننده درخواست عمل می کند:
const express = require('express');
const cors = require('cors');
const app = express();
app.get('/', (req, res) => {
res.json({
message: 'Hello World'
});
});
app.get('/:name', (req, res) => {
let name = req.params.name;
res.json({
message: `Hello ${name}`
});
});
app.listen(2020, () => {
console.log('server is listening روی port 2020');
});
بیایید برنامه و سرور را اجرا کنیم:
$ node index.js
حالا اگر به http://localhost:2020/ – سرور باید یک پیام JSON برگرداند:
{
"message": "Hello World"
}
متناوبا، اگر به http://localhost:2020/something باید ببینی:
{
"message": "Hello something"
}
همه درخواست های CORS را فعال کنید
اگر می‌خواهید CORS را برای همه درخواست‌ها فعال کنید، می‌توانید به سادگی از آن استفاده کنید cors میان افزار قبل از پیکربندی مسیرهای خود:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors())
......
این اجازه می دهد تا همه مسیرها در هر نقطه دسترسی داشته باشند روی وب اگر آن چیزی است که شما نیاز دارید. بنابراین در مثال ما، هر دو مسیر برای هر دامنه قابل دسترسی خواهند بود.
به عنوان مثال، اگر سرور ما در حال اجرا است روی http://www.example.com و محتوایی مانند تصاویر را ارائه می دهد – ما به دامنه های دیگر مانند http://www.differentdomain.com برای ارجاع مطالب از http://www.example.com.
بنابراین، یک وب page روی http://www.differentdomain.com می تواند از دامنه ما به عنوان منبع تصویر استفاده کند:
<img src="http://www.example.com/img/cat.jpg">
CORS را برای یک مسیر واحد فعال کنید
اما اگر به مسیر خاصی نیاز دارید که قابل دسترسی باشد نه مسیرهای دیگر، می توانید پیکربندی کنید cors در یک مسیر خاص به‌عنوان یک میان‌افزار به جای پیکربندی آن در کل برنامه:
app.get('/', cors(), (req, res) => {
res.json({
message: 'Hello World'
});
});
این اجازه می دهد تا یک مسیر خاص توسط هر دامنه قابل دسترسی باشد. بنابراین در مورد شما، فقط / مسیر برای هر دامنه قابل دسترسی خواهد بود. این /:name مسیر فقط برای درخواست‌هایی قابل دسترسی خواهد بود که در همان دامنه API آغاز شده‌اند http://localhost:2020 در مورد ما.
برای مثال، اگر بخواهید یک درخواست واکشی به / مسیری از مبدأ متفاوت – موفقیت آمیز خواهد بود و شما آن را دریافت خواهید کرد Hello World پیام به عنوان پاسخ:
fetch('http://localhost:2020/')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
باید ببینید که پاسخ سرور با موفقیت وارد شده است console اگر این کد را اجرا کنید:
{
message: 'Hello World'
}
اما اگر سعی کنید به مسیر دیگری غیر از مسیر دسترسی داشته باشید root مسیری مانند http://localhost:2020/name یا http://localhost:2020/img/cat.png این درخواست توسط مرورگر مسدود می شود:
fetch('http://localhost:2020/name/janith')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
اگر بخواهید این کد را در برنامه وب دیگری اجرا کنید، باید خطای زیر را مشاهده کنید:
CORS را با گزینه ها پیکربندی کنید
همچنین می‌توانید از گزینه‌های پیکربندی با CORS برای سفارشی‌سازی بیشتر استفاده کنید. می توانید از پیکربندی برای اجازه دسترسی به یک دامنه یا زیر دامنه استفاده کنید، روش های HTTP مجاز را پیکربندی کنید، مانند GET و POST بسته به روی نیازمندیهای شما.
در اینجا روش دسترسی به یک دامنه با استفاده از گزینه های CORS آمده است:
var corsOptions = {
origin: 'http://localhost:8080',
optionsSuccessStatus: 200 // For legacy browser support
}
app.use(cors(corsOptions));
اگر نام دامنه را در مبدا پیکربندی کنید – سرور به CORS از دامنه پیکربندی شده اجازه می دهد. بنابراین API از طریق آن قابل دسترسی خواهد بود http://localhost:8080 در مورد ما و برای دامنه های دیگر مسدود شده است.
اگر ما بفرستیم GET درخواست، دسترسی به هر مسیری باید کار کند، زیرا گزینه ها در سطح برنامه اعمال می شوند، نه در سطح عملکرد.
بنابراین، اگر کد زیر را اجرا کنیم و درخواستی از آن ارسال کنیم http://localhost:8080 به http://localhost:2020:
fetch('http://localhost:2020/')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
// Or
fetch('http://localhost:2020/name/janith')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
ما مجاز به دریافت اطلاعات از آن برنامه و دامنه هستیم.
در صورت تمایل می‌توانید روش‌های مجاز HTTP را نیز پیکربندی کنید:
var corsOptions = {
origin: 'http://localhost:8080',
optionsSuccessStatus: 200 // For legacy browser support
methods: "GET, PUT"
}
app.use(cors(corsOptions));
اگر ما بفرستیم POST درخواست از http://localhost:8080، به عنوان تنها توسط مرورگر مسدود می شود GET و PUT پشتیبانی می شوند:
fetch('http://localhost:2020', {
method: 'POST',
body: JSON.stringify({name: "janith"}),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
برای مشاهده لیست کامل گزینه های پیکربندی، لطفاً به آدرس مراجعه کنید اسناد رسمی.
پیکربندی Dynamic CORS Origins با استفاده از یک تابع
اگر پیکربندی‌ها نیازهای شما را برآورده نمی‌کنند، می‌توانید عملکرد خود را برای سفارشی کردن CORS ایجاد کنید.
به عنوان مثال، فرض کنید می‌خواهید به اشتراک‌گذاری CORS اجازه دهید .jpg فایل ها http://something.com و http://example.com:
const allowlist = ('http://something.com', 'http://example.com');
const corsOptionsDelegate = (req, callback) => {
let corsOptions;
let isDomainAllowed = whitelist.indexOf(req.header('Origin')) !== -1;
let isExtensionAllowed = req.path.endsWith('.jpg');
if (isDomainAllowed && isExtensionAllowed) {
// Enable CORS for this request
corsOptions = { origin: true }
} else {
// Disable CORS for this request
corsOptions = { origin: false }
}
callback(null, corsOptions)
}
app.use(cors(corsOptionsDelegate));
تابع callback دو پارامتر را می پذیرد. اولین مورد خطایی است که از آنجا عبور کردیم null و دومی گزینه هایی است که از آنجا عبور کردیم { origin: false }. پارامتر دوم می تواند گزینه های زیادی باشد که با استفاده از آن ساخته می شوند request شیء از کنترل کننده درخواست Express.
بنابراین یک برنامه وب که میزبانی می شود روی http://something.com یا http://example.com قادر به ارجاع به یک تصویر با .jpg پسوند از سرور همانطور که در تابع سفارشی خود پیکربندی کرده ایم.
بنابراین پیوست تصویر زیر از هر یک از این موارد موفق خواهد بود:
<img src="http://yourdomain.com/img/cat.jpg">
اما پیوست زیر مسدود خواهد شد:
<img src="http://yourdomain.com/img/cat.png">
در حال بارگیری فهرست مبداهای مجاز از به عنوان داده Source
همچنین می توانید از فهرستی از دامنه های مجاز از پایگاه داده استفاده کنید یا از هر منبع داده پشتیبان برای اجازه دادن به CORS استفاده کنید:
var corsOptions = {
origin: function (origin, callback) {
// Loading a list of allowed origins from the database
// Ex.. origins = ('http://example.com', 'http//something.com')
database.loadOrigins((error, origins) => {
callback(error, origins);
});
}
}
app.use(cors(corsOptions));
نتیجه
در این مقاله، ما توضیح داده‌ایم که CORS چیست و چگونه می‌توانید آن را با Express پیکربندی کنید. سپس، ما CORS را برای همه درخواست‌ها، برای درخواست‌های خاص، گزینه‌ها و محدودیت‌های اضافه شده و همچنین یک تابع سفارشی برای پیکربندی پویا CORS تعریف کرده‌ایم.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-20 09:04:03
