گاهی در توسعهٔ وب با خطاهای مختلفی روبرو می‌شویم که یکی از آن‌ها، به ویژه هنگام کار با API ها، خطای CORSRequestNotHttp است. این خطا به واسطهٔ محدودیت‌های امنیتی مرورگرها بروز می‌کند و نشان‌دهندهٔ این است که درخواست شما غیرمجاز است. اجازه دهید دلایل و راه‌حل‌های احتمالی برای رفع این خطا را بررسی کنیم.
اولین و ساده‌ترین دلیل این خطا می‌تواند ناشی از ارسال درخواست از پروتکل 'http' به یک 'https' باشد. برای مثال، اگر سرویس‌دهنده‌ای که از آن درخواست ارسال می‌کنید پروتکل 'https' دارد، باید اطمینان حاصل کنید که درخواست شما نیز از 'https' باشد.
صفحهٔ اینترنتی که در حال توسعهٔ آن هستید باید از 'http' یا 'https' با هم استفاده کند. در غیر اینصورت احتمال دریافت این خطا افزایش خواهد یافت. چنین موانعی اغلب وقتی رخ می‌دهد که صفحات خود را در محیط توسعهٔ محلی اجرا می‌کنید و از روش‌های مناسب برای ارائه سرویس‌دهنده استفاده نمی‌کنید.
دلیل دیگر ممکن است از توکن‌های امنیتی مانند که برای تایید صلاحیت استفاده می‌شوند باشد که ممکن است به درستی پیکربندی نشده باشند. در بسیاری موارد، فراهم کردن 'CORS Headers' در سمت سرور می‌تواند این مشکل را حل کند.
آخرین راه‌حل بررسی افزونه‌های مرورگر و تنظیمات فایروال یا پروکسی است که می‌تواند به واسطهٔ تنظیمات محدودکنندهٔ خود باعث بروز این خطا شوند. اطمینان حاصل کنید که تنظیمات صحیحی برای دسترسی‌ها و پروتکل‌ها در نظر گرفته‌اید.
کد نمونه برای رفع مشکل CORS
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There has been a problem with your fetch operation:', error));
توضیحات خط به خط کد
fetch('https://api.example.com/data', {درخواست فچ برای دریافت داده از URL معین.
method: 'GET',مشخص کردن متد HTTP که 'GET' است.
headers: {تعریف هدرهایی که به همراه درخواست ارسال می‌شوند.
'Content-Type': 'application/json',پیکربندی هدر جهت تعیین نوع محتوا به 'application/json'.
'Accept': 'application/json'هدر پذیرش که مشخص می‌کند پاسخ دریافتی باید از نوع 'JSON' باشد.
}پایان تعریف هدرها.
response => {مدیریت پاسخ از سرور.
if (!response.ok) {بررسی وضعیت پاسخ و تایید درست بودن آن.
throw new Error('Network response was not ok');در صورت خطا، پردازش وارد قسمت خطا می‌شود.
return response.json();پاسخ به قالب JSON تبدیل شده و بازمی‌گردد.
}پایان شرط.
data => console.log(data)داده‌های دریافت شده در کنسول نمایش داده می‌شود.
catch(error => console.error(...))مدیریت خطاها و نمایش پیام خطا در صورت وقوع اشتباه.